自舉輪播設置自動高度

Question

有沒有一種方法可以不為引導傳送帶設置高度，而是讓其根據圖像寬度設置為100％自動計算出高度？ 我知道它會在幻燈片之間上下反彈，這很好。 目前對於bootstrap html我有：

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="slider-image img-responsive " style="background-image: url(/folder/image.png); background-position: 50% 50%; background-size: cover;"></div>
        </div>
    </div>
</div>

使用CSS：

#carousel, .item, .slider-image {
  height: auto;
  width: 100%;
}

這樣我根本看不到圖像-它只是將高度設置為0。有什么想法嗎？

Answer 1

這段代碼對我有用：

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

如果要調整圖像的大小，可以向目標圖像添加一個CSS類，祝您好運

Answer 2

無需使用div和背景，只需將帶有圖像標簽的圖像放入幻燈片中，並將圖像寬度設置為100％

HTML：

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img src="path/to/image.jpg"/>
        </div>
    </div>
</div>

CSS：

#carousel .item img{
  width:100%;
}