Question

我的Vue页面上有一个照相馆，选择照片后，通过设置selectedCard可以跳出对话框。
当图像不适合屏幕尺寸时。
我尝试将CSS的最大高度或宽度设置为100％的最大值，但没有一个起作用。
如何修复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>

Answer 1

尝试使用vh设置图像高度。也许这可行：

img {
  height:100vh;
}

Answer 2

将CSS宽度和高度添加到100％

img { 
    width:100%; 
    height:100%; 
    }

Answer 3

如果要显示完整图像，请使用:cover="true"中的<v-img>。如果要显示整个图像，则可以遵循CSS。

.v-image__image{
 background-size:100% 100%;
}

不建议这样做，因为图像的比例会错误。

Answer 4

使用纯 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>

Vuetify：使v图片适合屏幕尺寸

4 个答案: