引導輪播設置自動高度不起作用

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類與輪播項目一起添加即可。 它為我工作。