css - Vuetify v-row 背景图片高度

Question

我正在尝试将背景图像放在 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;

但需要根据屏幕大小进行调整。

有解决办法吗？

标签： cssvuetify.jsbackground-image

Answer 1

如果要使用图像，可以使用：

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

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