ブートストラップカルーセルでイメージを縮小する方法

Question

私は、プラグインではなくWordPressの革新的なスライダのような私のウェブサイトの種類の背景イメージのカバーとして機能するカルーセルを構築しようとしています。私の静的なウェブサイトのためだけに構築しています。問題は、いくつかの画像の高さと幅が異なるため、カルーセルが適切に調整されないことです。例えば、img no。 1は2048 * 3072 px、2番目は3072 * 2048 pxなどです。私は、カルーセルの高さと幅を表紙画像のように100％にしたいと考えています。 min-widthとheightをそれぞれ100％と100vhに設定すると、画像は底から切り取られます。どんな助け？ここに私のコードでは、オブジェクトフィットプロパティを使用する必要があります

<!--carousel--> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
<!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
    <img class ="fill"src="img/msp_0409_3522.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img class ="fill" src="img/msp_0406_1786.jpg" alt="Chania"> 
    </div> 

    <div class="item"> 
     <img class ="fill" src="img/msp_1608_9566.jpg" alt="Flower"> 
    </div> 

    <div class="item"> 
    <img class ="fill" src="img/msp_1605_6918.jpg" alt="Flower"> 
    </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-         slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data- slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span> 
    <span class="sr-only">Next</span> 
    </a> 
    </div> 

CSS

html,body{ 
    height:100%; 
    } 
    .carousel,.item,.active{ 
height:100%; 
    } 
.carousel-inner{ 
height:100%; 
} 
.fill{ 
    width:100%; 
    height:100%; 
    background-position:center 
    ;background-size:cover; 
    } 

Answer 1

です。 .carousel-inner>.item>imgあなたのフィルクラスをオーバーライドしているように見えるあなたのコードで

.carousel-inner img { 
    object-fit: contain; 
} 

https://css-tricks.com/almanac/properties/o/object-fit/

Answer 2

： あなたはそのような何かを試すことができます。ブートストラッププロパティをオーバーライドするには、クラスに重要な！を追加してください。

.fill { 
    width: 100%; 
    height: 100% !important; 
} 

ます。また、背景画像のための彼らだけのスタイルの背景画像としてbackground-positionまたはbackground-size

Code Pen link

Answer 3

を必要としない、あなたが使用することができます。

background-image: url("image.jpg"); 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover;