Vuetify v 行背景图像高度

Question

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

<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行的高度来适应图片的高度呢？我意识到

height: 100%

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

height: 100vh;

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

height: 600px;

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

有解决办法吗？

Answer 1

如果您想使用图片，您可以使用：

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

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

Vuetify v 行背景图像高度

Vuetify v-row background image height

css

background-image

vuetify.js