Vuetify v-img 在 v-col 内对齐答案

【问题标题】：Vuetify v-img align right inside v-colVuetify v-img 在 v-col 内对齐
【发布时间】：2020-11-05 20:27:15
【问题描述】：

我认为这很容易，但我无法实现图像向右对齐...请参阅此代码笔：

https://codepen.io/slayerbleast/pen/KKVGgKO

代码：

<v-content>
  <v-container>
    <v-row 
           align="right" 
           align-content="right" 
           class="text-right"
           >
      <v-col class="text-right">
        <v-img 
               max-height="200px" 
               max-width="200px"
               src="https://picsum.photos/200/300"
               align="right"
               ></v-img>
      </v-col>
    </v-row>  
  </v-container>
</v-content>

如何将图像与 v-col 内的右侧对齐

【问题讨论】：

标签： image vue.js alignment vuetify.js

【解决方案1】：

您可以简单地使用 vuetify 中的 .ml-auto 实用程序类。无需编写自己的 CSS。
这是我所做的更改。

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-row>
          <v-col>
            <v-img 
                   max-height="200px" 
                   max-width="200px"
                   src="https://picsum.photos/200/300"
                   class="ml-auto"
                   ></v-img>
          </v-col>
        </v-row>  
      </v-container>
    </v-content>
  </v-app>
</div>

它似乎正在工作，here's 是你笔的工作克隆

【讨论】：

【解决方案2】：

由于 img 是背景图像，因此假设在 <div> 容器中包装图像时缺少细节。

.text-right .v-image {
  display: inline-block;
}

会的

【讨论】：

这不起作用：codepen.io/slayerbleast/pen/KKVGgKO