Css Vuetify：在屏幕大小内调整v-image

我的vue页面有一个照片库，当选择照片时，通过设置

selectedCard

当图像不适合屏幕大小时。
我尝试将css的最大高度或最大宽度设置为100%，但没有一个有效。
如何修复css，以便在屏幕上查看整个图像而无需滚动？
屏幕上限：只能显示图像的一半

//对话框组件
某物按钮
//MyCard组件

尝试使用vh作为图像高度。 也许这会起作用：

img {
  height:100vh;
}

---

将css宽度和高度添加到100%

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

---

如果要显示完整图像，请在

中使用

：cover=“true”

。 如果您想显示整个图像，您可以放置以下CSS

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

---

这不是推荐的方法。因为图像的比例会出错。

添加了封面，但效果不好，图像仍然显示相同的内容。我需要保持图像的比例，你可以在Codepen里写些代码吗？我必须检查css并解决这个问题。

：cover

在

v-img

上不是有效的Vuetify属性。它应该是

：contain

，这已经在OP的代码中了。添加了，但对图像没有影响，仍然看起来和我的屏幕字幕一样这也在你的标签中添加了'contain'，我觉得vuetify没有类道具，也可以在vuetify js网站上查看。然后重要注意，我注意到vuetify没有使用，它使用div来显示图像，所以我认为这是您出现问题的主要原因。如果您注意到您可以轻松解决此问题，并且它的外观会更好，但是图像仍然比屏幕大一点（约10%）。仍然需要滚动以查看整个图像尝试将其调整为80vh而不是100VH在此处共享您的工作代码请同时共享您的CSS代码，否则几乎无法帮助您。

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