如何调整引导轮播高度？答案

【问题标题】：How adjust bootstrap carousel height?如何调整引导轮播高度？
【发布时间】：2019-07-09 08:26:20
【问题描述】：

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

【问题讨论】：

标签： laravel twitter-bootstrap bootstrap-4 carousel saas

【解决方案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%
}
}

这是结果

【讨论】：

【解决方案2】：

您无法处理 carousel-item active 的问题。你可以试试 col-md-6 或 col-sm-12 而不是 carousel-item 活动。这样，高度将自动调整。

【讨论】：

尝试加深答案，包括更多细节

【解决方案3】：

你需要使用

.carousel {
   min-height: auto;
}

或尝试使用

.carousel {
   min-height: 100%;
}

【讨论】：

【解决方案4】：

尝试使用 viewheight，

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

Viewheight 占屏幕视图的 %。 50vh 表示它将占用您显示屏的 50%。 100vh 将占用 100% 的显示屏。

【讨论】：

【解决方案5】：

只需在幻灯片<img /> 标签上添加宽度：100%。如果您使用的是引导程序，请使用 w-100 类或 smth。但请注意，SEO 会因为这样缩小图像而大发雷霆，您可能希望使用多张图像并根据屏幕尺寸显示它们。

【讨论】：