引导轮播设置自动高度不起作用答案

【问题标题】：Bootstrap carousel setting auto height not working引导轮播设置自动高度不起作用
【发布时间】：2019-02-05 14:17:37
【问题描述】：

我找不到在 Bootstrap 轮播中的图像上设置自动高度的方法。我发现在图像上具有自动高度的唯一方法是这样，但如图所示，margin:auto 创建 hudge 顶部和底部边距。我怎么能删除它？如果我删除 margin:auto，height:auto 将不再起作用。

HTML

<div id="carousel-{{$kit->kitNo}}" class="carousel slide" data-ride="carousel">                  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="img-fluid" src="http://www.lebureauculturel.ch/wp-content/uploads/2017/09/goprohero5black.png" alt="First slide">
    </div>
  </div>
</div>

CSS

.carousel-inner {
 height:auto;
}
.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
  width: 100%;
  margin: auto;
  min-height:initial;
}

例如，使用更大的 img 时，弹出窗口会离开屏幕。

【问题讨论】：

标签： html css bootstrap-4 carousel

【解决方案1】：

我也遇到过同样的问题，一直没有找到合适的答案。

我在图片上有说明文字，如果有响应，它们会变得很小，难以阅读。

我克服这个问题的方式，没有回答你的问题，我选择了合适的图像，裁剪后左边看起来不错。然后文本保持相同大小，便于在移动设备上阅读。

因此，无论屏幕尺寸是多少，图像都保持相同的高度，但明显裁剪为屏幕尺寸。

基思

【讨论】：

感谢您的回答，但正如您所说，它并没有解决我的问题。无论如何，如果没有其他解决方案，我将使用此解决方案
我更新了我的引导程序，图像高度仍然不固定，但这样好一点。我真的不知道小的引导程序更改发生了什么变化。我会使用你的解决方案并专注于更重要的事情。

【解决方案2】：

将 carousel-item 高度设置为 auto 或简单地将 h-auto 类与 carousel-item 一起添加。它对我有用。

【讨论】：