如何调整自举轮播的高度？

Question

这是我的网站：https://pcshiraz.ir
我的轮播图片高度没有响应，找不到解决方法。

Answer 1

嗨，您可以添加我在您的网站中尝试过的样式表，它的检查元素有效！

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .carousel-inner {
    height: 400px;
}

.carousel-item, .carousel-item img {
    height: 400px;
  width:100%;
}

} 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 767px) {
    .carousel-inner {
    height: 160px;
}

.carousel-item, .carousel-item img {
    height: 160px;
  width:100%
}
}

这是结果

Answer 2

carousel-item active无法解决该问题。您可以尝试col-md-6或col-sm-12 而不是轮播项目活跃。这样，高度将自动调整大小。

Answer 3

您需要使用

OR

或尝试使用

.carousel {
   min-height: auto;
}

Answer 4

尝试使用viewheight，

.carousel{
    min-height: 100vh;
    height: 100vh;
}

Viewheight占屏幕视图的百分比。 50vh表示它将占据您显示器的50％。 100vh将占用您的显示的100％。

Answer 5

只需在幻灯片<img />标签上添加宽度：100％。如果使用引导程序，请使用w-100 class或smth。但是请注意，SEO会像这样缩小图像，您可能会想使用它，所以您可能要使用几张图像，并根据屏幕尺寸显示它们。