/ /ブートストラップカルーセルで100%幅の画像を使用してアニメーション中に高さの変化を防ぐ方法-html、css、twitter-bootstrap、twitter-bootstrap-3、carousel

ブートストラップカルーセルで100%幅の画像を使用するアニメーション中の高さの変化を防ぐ方法 - html、css、twitter-bootstrap、twitter-bootstrap-3、カルーセル

ブートストラップ3カルーセルは、アニメーション中に固定高さの画像を使用する必要があります。 カルーセルは、ブートストラップチュートリアルのコードを使用して作成されます

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="124">
<img class="carousel-img" src="/images/124" />
</a>
</div>
<div class="item ">
<a href="123">
<img class="carousel-img" src="/images/123" />

</a>
</div>
</div>
</div>

画像の幅は、からの回答を使用してカルーセルの幅に設定されます

カルーセルで画像を中央に配置する方法

.carousel-img {
width: 100%;
height: auto;
}

画面の解像度が大きく、ズームレベルが小さいと、アニメーションで画像の高さが低下します。 コンテンツがジャンプしないように固定高さを使用する方法は?

回答:

回答№1は1

このCSSを追加するだけで、

.carousel-inner > .item{
width: 100%;
}