无法在 v-carousel 上设置最小高度

Question

我有一个由 Vuetify 轮播组成的标题图片。 轮播的截面容器为 100vh，v-carousel 元素高度设置为 100%。 我希望在 section 元素上设置 300px 的最小高度可以防止轮播图片的高度小于 300px。相反，在降低屏幕高度的同时，我注意到一条标记最小高度的线，但随着我降低屏幕高度，里面的图片变得更小。下面是我的代码，有人可以建议我做错了什么吗？我从检查工具中看到 v-carousel-item 是一个带有背景图像的 div，我想知道这是否会以某种方式影响我的代码。

<template>
  <div class="home router-view">
      <section style="height:100vh;
       background-size:cover;
       background-attachment:fixed;
       background-position:center;
       position:relative;
       max-height:1300px; 
       min-height: 400px">
        <v-carousel
          cycle
          hide-controls
          hide-delimiters
          style="position:absolute;top:0;width:100%;height:100%"
        >
          <v-carousel-item 
            :src="require('@/assets/images/picture.jpg')"
          >
          </v-carousel-item>

Answer 1

我对你的造型感到困惑。您是否一直在尝试将整个页面（100vh）作为封面？那么你就不需要 min-height 什么的了。

无论如何，尝试在 v-carousel 的样式中添加 min-height:100% 以强制高度。

如果不起作用，请查看 v-carousel 的 props 并尝试添加 vuetify 原生提供的 height="100%"。

见：https://vuetifyjs.com/en/api/v-carousel/#props

如果您提供复制品、codepen 等，您的问题会更容易理解。

如果有效，请告诉我！