如何调整bootstrap轮播高度？

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而不是carousel-item激活。这样高度就会自动调整。

Answer 3

你需要使用

.carousel {
   min-height: auto;
}

或尝试使用

.carousel {
   min-height: 100%;
}

Answer 4

尝试使用viewheight，

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

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

Answer 5

只需在幻灯片<img />标签上添加宽度：100％即可。如果你使用bootstrap使用w-100 class或smth。但请注意，搜索引擎优化会让你的屁股缩小，因为你可能想要使用多张图片并根据屏幕尺寸显示它们。