Bootstrapカルーセルの高さを変更

Question

ここにjsfiddleがあります- http://jsfiddle.net/gh4Lur4b/8/

全幅bootstrapカルーセル。

高さを変更し、それでも全幅を維持したいです。

画像の高さで決まる高さです。

カルーセルの高さを変更して、幅を100％に保つにはどうすればよいですか。

    .carousel-inner{
       // height: 300px;
    }

    .item, img{
        height: 100% !important;
        width:  100% !important;
        border: 1px solid red;
    }

Answer 1

以下が動作するはずです

.carousel .item {
  height: 300px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

JSFille 参照用。

Answer 2

からブートストラップ4

.carousel-item{
    height: 200px;
} 
.carousel-item img{
    height: 200px;
}

Answer 3

ありがとうございました！この投稿は非常に役立ちます。追加することもできます

object-fit：cover;

異なるウィンドウサイズのアスペクト比を保持するには

.carousel .item {
  height: 500px;
}

.item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 500px;
}