<img> auf gesamte div mit Keeping-Verhältnis zu erweitern

Question

Ich habe eine Galerie Slider in Bootstrap. Es muss RWD sein also muss ich zB benutzen. maximale Höhe.

Das Problem ist, dass die Bilder in dieser Galerie unterschiedlich sein können. Sie können größer/kleiner sein - mit unterschiedlichem Verhältnis. In diesem Beispiel hat ein .carousel div height: 450px. Um RWD freundlich zu sein, möchte ich max-height verwenden, aber Bilder in diesem Karussell müssen 100% zum gesamten div mit dem behaltenen Verhältnis sein. Auch wenn ein Bild über diese div (oder umgekehrt) überläuft. In diesem Fall muss img vertikal und horizontal zentriert sein (vielleicht mit flexbox?). Wenn ich max-height mache, springt das Karussell, weil Fotos größer oder kleiner sein können. Wenn ich height auf Karussell sie nicht springen haben, aber es ist nicht RWD Option und einige Bilder können kleiner als div sein (überprüfen Beispiel unten)

Here is example

Answer 1

Versuchen object-fit: cover verwenden. Diese behalten Ihre Bildrate bei, egal welche Größe Sie einstellen. Es verhält sich so, als würde man das Bild beschneiden. Sie können auch object-position: center hinzufügen, um Ihr Bild in der Mitte zu positionieren.

.carousel-inner > .item > img { 
    object-fit: cover; 
    object-position: center; 
    // then your height and/or width 
} 

finden auf diesem Link für weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 2

Ihre beste Wette ist wirklich Ihre Bilder als Hintergrundbilder in Ihrem CSS hinzufügen, die Sie entweder das Stylesheet in dem eigentlichen CSS tun können, oder fügen Sie einfach einen Stil Tag an die .item selbst. Dann fügen Sie Ihre Höhe und so zum .carousel .item statt des gesamten Karussells selbst zusammen mit Hintergrundposition und Hintergrundgröße dann entfernen Sie das Bildmarken vollständig von Ihrem .item in Ihrem Markup. Im folgenden Beispiel habe ich die! Important zur Hintergrundgröße und Hintergrundposition hinzugefügt. Sie können diese entfernen, wenn Sie sich nur noch den Hintergrund in der CSS-Stylesheet angeben, aber wenn Sie möchten, können Sie somthething tun wie sie in einem Stil-Tag im HTML-Markup setzen wie

<div class="item active" style="background:url('path-to-image');"></div> 

Wenn Sie dies tun würden Sie Sie müssen die wichtigen Aussagen in Ihrem CSS aufbewahren, damit dies funktioniert, sonst besteht keine Notwendigkeit für sie. Hier

ist eine überarbeitete Geige Fiddle Demo

So Ihre CSS in etwa wie folgt aussehen:

.carousel .item{ 
    width: 100%; 
    height: 450px; 
    overflow: hidden; 
    background-position:center !Important; 
    background-size:cover !important; 
} 
.carousel .item:nth-of-type(1){ 
    background:url('https://pixabay.com/static/uploads/photo/2014/03/29/09/17/cat-300572_960_720.jpg') 
} 
.carousel .item:nth-of-type(2){ 
    background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-349976.png') 
} 
.carousel .item:nth-of-type(3){ 
    background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-80082.jpg') 
} 

/* Indicators list style */ 
.article-slide .carousel-indicators { 
    width: auto; 
    white-space: nowrap; 
    margin: 0; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
/* Indicators list style */ 
.article-slide .carousel-indicators li { 
    border: medium none; 
    border-radius: 0; 
    float: left; 
    height: 54px; 
    margin-bottom: 5px; 
    margin-left: 0; 
    margin-right: 5px !important; 
    margin-top: 0; 
    width: 100px; 
} 
/* Indicators images style */ 
.article-slide .carousel-indicators img { 
    border: 2px solid #FFFFFF; 
    float: left; 
    height: 54px; 
    left: 0; 
    width: 100px; 
} 
/* Indicators active image style */ 
.article-slide .carousel-indicators .active img { 
    border: 2px solid #428BCA; 
    opacity: 0.7; 
}