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

Question

我找不到在Bootstrap轮播中的图像上具有自动高度的方法。 我发现在图像上具有自动高度的唯一方法是这样，但是如图所示， margin:auto创建顶边距和底边距。 我该如何删除？ 如果我删除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

将轮播项目高度设置为自动，或者只需将h-auto类与轮播项目一起添加即可。 它为我工作。