如何将图像水平对齐？(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>

我尝试了我在互联网上和文档中找到的每一个元素：

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中，您可以将类.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>

​