无法在V型轮播上设置最小高度

如何解决无法在V型轮播上设置最小高度

我有一个标头图片，它由Vuetify轮播组成。轮播的分段容器为100vh，v轮播元素的高度设置为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>

解决方法

你的造型让我很困惑。您是否一直在尝试覆盖整个页面（100vh）？然后，您不需要最小高度或其他任何东西。

无论如何，请尝试在v型旋转木马的样式内添加 min-height：100％以强制高度。

如果它不起作用，请查看v-carousel的道具，然后尝试添加vuetify原生提供的height =“ 100％”。

请参阅：https://vuetifyjs.com/en/api/v-carousel/#props

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

请让我知道它是否有效！