Bildseitenverhältnis in Karussell beibehalten

Question

Ich benutze Bootstrap, um ein Karussell zu erstellen, ich habe große Bilder, wenn der Bildschirm kleiner als das Bild ist, wird das Verhältnis nicht beibehalten.

Wie könnte ich das ändern?

Hier ist mein Code:

.carousel .item { 
    height: 500px; 
} 
.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

http://jsfiddle.net/DRQkQ/

ich das Bild benötigen 100% Breite zu passen, aber halten seine Höhe von 500px (ich glaube, es ist 500px) dies, dass auf kleineren Bildschirm bedeuten, sollten wir Sehen Sie nicht ganz links und ganz rechts im Bild.

Ich habe versucht, das Bild in einem div enthält und

overflow: hidden; 
width: 100%; 
height: 500px; 
display: block; 
margin: 0 auto; 

hinzufügen Aber es ist nicht

Sie arbeiten Dank!

Answer 1

Das Problem liegt hier auf Bootstrap CSS:

img { 
    max-width: 100%; 
    width: auto 9; 
    height: auto; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 

max-width: 100%; das Bild nicht größer als der Darstellungsbereich eingestellt werden müssen. Sie müssen dieses Verhalten auf Ihrem CSS außer Kraft zu setzen:

.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
    max-width: none; 
} 

Notiere die max-width: none; am unteren Rand hinzugefügt. Dies ist der Standardwert für die maximale Breite und hebt das Limit auf.

Here's Ihre Geige aktualisiert.

Answer 2

Löschen Sie das img Tag innerhalb des Karussellelements und fügen Sie einen Hintergrund hinzu. Auf diese Weise können Sie die CSS3-Cover-Eigenschaft verwenden.

.item1 { 
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 3

Ich konnte dies erreichen, indem die Höhenlinie von der carousel.css Linie zu kommentieren, wie unten dargestellt:

Dieser Code schließlich arbeitete für mich

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    /*height: 500px;*/ 
} 

Answer 4

:

.carousel .item { 
    background:#F9F9F9; 
    border:1px solid #E0E0E0; 
    overflow:hidden; 
    margin-bottom:1em; 
    margin-top:1em; 
    padding:5px; 
} 
.carousel-inner > .item > img { 
    border: 1px solid #DDDDDD; 
    float: left; 
    margin: 0pt 3px; 
    padding: 2px; 
    height: none; 
    width: 100%; 
} 

.carousel-inner > .item > img:hover { 
    border: 1px solid #000000; 
} 

Answer 5

Ich denke, es ist besser, es mit CSS3 object-fit Attribut zu behandeln.

Wenn Sie ein Bild mit fester Breite und Höhe haben und trotzdem das Seitenverhältnis beibehalten möchten, können Sie object-fit:contain; verwenden. Es wird das Verhältnis zu gegebener Höhe und Breite beibehalten.

Zum Beispiel:

img { 
     height: 100px; 
     width: 100px; 
     object-fit: contain; 
} 

Sie können weitere Informationen finden Sie hier: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Hoffnung dies jemand von Nutzen sein wird.

Answer 6

Anscheinend funktionierten die oben erwähnten Lösungen nicht für mich (ich weiß nicht warum?), Aber ich fand eine andere Abhilfe mit Javascript.

Grundsätzlich ist dies eine langweilige Methode, funktioniert aber auch. Sie verwenden jQuery, um die Karussellhöhe auf die Breite geteilt durch ein bestimmtes Seitenverhältnis festzulegen.

Hier ist mein Code:

var aspectRatio = 2.5; //Width to Height!!! 
    var imageWidth; 
    var imageHeight; 

    //bind the window resize event to the method - 
    //change in carousel width is only triggered when size of viewport changes 
    $(window).on("resize", methodToFixLayout); 

    //updates the carousel width when the window is resized 
    function methodToFixLayout(e){ 

     imageWidth = carousel.width(); 
     console.log(""); 
     console.log("Method width" + imageWidth); 
     console.log(""); 

     imageHeight = imageWidth/aspectRatio; 

     carouselContainer.height(imageHeight);  
     carousel.height(imageHeight); 
     carouselPic.height(imageHeight); 

     //solve the carousel glitch for small viewports - delete the carousel 
     windowWidth = $(window).width(); 
     if (windowWidth < 840){ 
      carousel.hide(); 
      $("#side-navbar").hide(); 
     } else { 
      carousel.show(); 
      $("#side-navbar").show(); 
     } 



    } 

Es scheint gut zu funktionieren für mich.

Hoffe, es funktioniert auch für Sie.

Sie können entweder das Seitenverhältnis selbst festlegen oder eine andere Methode verwenden. Stellen Sie zuerst die Fensterbreite und -höhe auf eine Ansichtdimension ein, in der das Bild gut formatiert erscheint. Fragen Sie die Breite und Höhe ab und berechnen Sie das Verhältnis. Stellen Sie das Fenster wieder auf die ursprüngliche Breite und Höhe zurück. Der Benutzer würde die Änderung überhaupt nicht bemerken, aber die Abmessungen würden aufgezeichnet werden.

Answer 7

zu Seitenverhältnis & vollständige Abdeckung des Karussells div zu halten:

img { 
object-fit: cover; 
overflow: hidden; 
    } 

Answer 8

Wie andere erwähnt haben, css3 schön für das funktioniert. Ich benutzte volle Breite, feste Höhe für den Behälter, skaliert dann das Bild, das Seitenverhältnis mit 'Abdeckung' hält, dann den Überlauf wegwerfen:

.carousel .carousel-inner img { 
    width: 100%; 
    height: 30em; 
    object-fit: cover; 
    overflow: hidden; 
}