如何水平对齐图像？ (Vuetify.js)

Question

它长什么样，我想要什么：

我的模板代码：

  <v-row>
    <v-col md="6" v-bind:key="el._id" v-for="el in els">
      <v-card max-width="280" tile elevation="0" outlined>{{ text }}</v-card>
        <v-img class="my-10" height="100" width="200" contain :src="src"></v-img>
    </v-col>
  </v-row>

我尝试了在 Internet 和文档中找到的每个元素的所有内容：

class="justify-start" 
align="start"
justify="start"

和：

style="justify-content: start !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  align-self: flex-start !important;
  justify-self: flex-start !important;"

但没有任何效果。

Answer 1

问题实际上出在 Vuetify 的 contain 功能上。
它使图像成为 background-image 和 background-position: center center.
要自定义它，在您的 css 中，您可以定位 class .v-image__image--contain 并使其成为 background-position: left center !important;.

这是一个例子：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

.v-image__image--contain {
  background-position: left center !important;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-row>
    <v-col md="6">
      <v-card max-width="280" tile elevation="0" outlined>Test</v-card>
        <v-img class="my-10" height="100" width="200" contain src="https://dummyimage.com/600x400/000/fff" style="background-position: left center;"></v-img>
    </v-col>
    <v-col md="6">
      <v-card max-width="280" tile elevation="0" outlined>Test</v-card>
        <v-img class="my-10" height="100" width="200" contain src="https://dummyimage.com/600x400/000/fff"></v-img>
    </v-col>
  </v-row>
</div>

如何水平对齐图像？ (Vuetify.js)

How to align images horizontal? (Vuetify.js)

html

css

templates

vue.js

vuetify.js