Question

当我使用v-carousel时，一切正常，除非我在移动设备上注意到，即使轮播本身具有响应能力，但其中的图像都没有响应，因此仅显示每张图片的中间部分：

 <v-carousel hide-delimiters>
    <v-carousel-item
       v-for="(item,i) in items"
       :key="i"
       :src="item.src"
     ></v-carousel-item>
 </v-carousel>

我该如何克服这个问题？我也希望看到轮播中的图像也能响应。

Answer 1

我检出了v-carousel，它看起来像是div，其图像被设置为背景图像，因此您正在寻找background-size CSS，并将其设置为{ {1}}，您应该被设置。有关更多详细信息，请查看W3 here

编辑：深入研究v型轮播，看起来图像格式已在API here

中设置

Answer 2

我不知道v-carousel的工作原理，但是，仅查看由carousel生成的html使用的是背景图片，这会使您的图片无法响应。

建议您更改轮播或搜索某个选项，以更改图像的放置方式。

使用img标签，您可以在css max-width: 100%中进行设置，并且图像将响应。

Answer 3

只需像这样在 height="auto" 上添加 <v-carousel>：

<v-carousel height="auto" hide-delimiters>

然后轮播将变为响应式，图像将根据您的容器/屏幕宽度缩小。

v-carousel具有响应能力，但不包含其中的图像

3 个答案: