Vuetify：使 v-image 适合屏幕大小

Question

My vue page have a photo gallery, and when a photo is selected, the dialog will jump out by setting the selectedCard .

虽然图像不适合屏幕的大小。

我试图在任何地方设置最大高度或宽度为 100% 的 css，但它们都不起作用。

如何修复我的 css 以便可以在屏幕上查看整个图像而无需滚动？

屏幕截图：只能显示一半的图像

 //Dialog component
<template>
  <v-dialog :value="selectedCard" scrollable fullscreen hide-overlay>
    <v-card v-if="selectedCard">
      <v-container grid-list-sm fluid>
        <v-layout align-space-around row fill-height>
          <v-flex id="mainCardPanel">
            <v-layout align-space-around column fill-height>
              <v-flex xs12>
                <MyCard class="mainCard" :card="selectedCard"></MyCard>
              </v-flex>
              <v-flex xs12>
                <v-btn> SomeButton </v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-dialog>
</template>
// MyCard component
<template>
  <v-card flat tile class="d-flex justify-center" >
    <v-img :contain="true" :src=card.imageUrlHiRes
        :lazy-src=card.imageUrl class="grey lighten-2 Card">
      <template v-slot:placeholder>
        <v-layout fill-height align-center justify-center ma-0>
          <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
        </v-layout>
      </template>
    </v-img>
  </v-card>
</template>

原文由 brian661 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对我来说，使用纯 HTML 似乎更简单、更好。 vuetify 有时只会使简单的事情复杂化。使用 v-col ， div ，任何块…

 <v-row class="fill-height"
    justify="center"
    align="center"
    style="background-image: url('card.imageUrlHiRes');
    background-size: cover;" >

  </v-row>

原文由 DAVID AJAYI 发布，翻译遵循 CC BY-SA 4.0 许可协议