Bootstrap轮播设置自动高度不起作用

Question

我找不到在Bootstrap轮播中为图像设置自动高度的方法。我发现在图像上有自动高度的唯一方法就是这样，但如图所示margin:auto创建了hudge top＆amp; bottom margin。我怎么能删除它？如果我删除了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弹出窗口离开屏幕例如。

Answer 1

我遇到了同样的问题，从未找到合适的答案。

我有图片上的字幕，如果有回应，他们会去小看书。

我克服这个问题的方式，没有回答你的问题，我选择合适的图像，当裁剪看起来很好时左侧。然后，文字大小相同，便于在手机上阅读。

因此无论屏幕尺寸如何，图像都保持相同的高度，但显然会缩小到屏幕尺寸。

基思

Answer 2

将轮播项目高度设置为auto，或仅将h-auto类与轮播项目一起添加。它对我有用。