css - Vuetify:使 v-image 适合屏幕大小
问题描述
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>
解决方案
尝试使用 vh 作为图像高度。也许这可能有效:
img {
height:100vh;
}
推荐阅读
- python - 读取 csv 时阻止 pandas 对数据进行分组
- php - 如何根据单击的链接创建一个加载动态/不同内容的 PHP 页面?
- r - purrr - pmap - 以整洁的风格为函数参数名称提供不同的列名
- javascript - 标签组件不会使用 BackSpace 删除 - React Native
- styles - stylegan 编码器打印图像太小
- c# - 使用窗口标题或进程名称
- python - 允许在 Sphinx 文档字符串的简短摘要中使用句号
- linux - 如何将两个 CSV 文件与 Linux 列合并?
- javascript - 使用 JavaScript 将元素中的某些文本转换为元素本身
- elasticsearch - 如何使用 Kibana 脚本字段在嵌套字段中获取值?