Wie Bilder im Bootstrap-Karussell zu verkleinern

Question

Ich versuche, ein Karussell, das als Hintergrundbild Abdeckung für meine Website Art von wie revolutionäre Slider in WordPress, aber kein Plugin fungiert. Ich baue es nur für meine statische Website. Das Problem ist, dass einige meiner Bilder unterschiedliche Höhe und Breite haben, so dass sich das Karussell nicht richtig anpasst. zum Beispiel img nein. 1 ist 2048 * 3072 px 2nd ist 3072 * 2048 px und so weiter. Ich möchte mein Karussell Höhe und Breite zu 100% wie ein Titelbild machen. wenn ich min-width und height auf 100% bzw. 100vh setze, werden die Bilder von unten abgeschnitten. irgendeine Hilfe? Hier ist mein Code

<!--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

sollten Sie Objekt-fit-Eigenschaft verwenden. Sie können so etwas versuchen:

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

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

Answer 2

In Ihrem Code sieht es aus wie .carousel-inner>.item>img Ihre Füllung Klasse überschreiben wird. Um die Bootstrap-Eigenschaft zu überschreiben, fügen Sie ein! Wichtig für Ihre Klasse hinzu.

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

Sie auch nicht brauchen die background-position oder background-size, da sie nur Stil Hintergrundbilder

Code Pen link

Answer 3

für Hintergrundbild, können Sie verwenden:

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