Vuetify v-row 背景图片高度答案

【问题标题】：Vuetify v-row background image heightVuetify v-row 背景图片高度
【发布时间】：2021-04-04 18:31:27
【问题描述】：

我正在尝试将背景图像放在 v-row 中，以便宽度填满屏幕并且 v-row 的高度会自动调整。

<v-row class="bg" align="center" justify="center">
    <v-col cols="12" sm="6" md="4">
      Date picker 1
    </v-col>

    <v-col cols="12" sm="6" md="4" background="white">
      Date picker 2
    </v-col>
</v-row>

.bg {
  background: url("../assets/hills.jpg") no-repeat center center;
 }

没有任何高度样式我得到#1。我想要#2所示的效果：

那么如何设置 v-row 的高度以适应图像的高度？我明白了

height: 100%

不会增加包含 v-row 的高度 - 应用于 v-row 的样式而不是图像。这个

height: 100vh;

在一定程度上起作用，但高度反映了视口的高度，而不是背景图像，因此太大了。固定高度就可以了

height: 600px;

但需要根据屏幕尺寸进行调整。

有解决办法吗？

【问题讨论】：

您能否描述一下您想要的效果，例如，如果设备处于纵向模式，或者更笼统地说，如果视口的纵横比与图像的大不相同？
简单的让宽度为窗口的100%（或者旋转），高度根据图像的宽高比自动调整。进一步阅读后，我怀疑它只能使用 js calcualtions 完成，然后将样式添加到 v-row。
或者也许放入一个 img 元素而不是尝试使用背景图像。

标签： css vuetify.js background-image

【解决方案1】：

如果您想使用可以使用的图像：

position: absolute;
object-fit: cover;
width: 100%;
height: 100%;

然后这将增长到内容的大小（假设父级是position: relative;，同时保持比例。如果您使用媒体查询或类似方法调整内容的填充，您应该能够获得您正在寻找的效果.

【讨论】：