it-swarm.com.de

Bildseitenverhältnis im Karussell beibehalten

Ich verwende 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 brauche ein Bild, das zu 100% in die Breite passt, aber halte die Höhe von 500px (ich denke, es ist 500px). Dies sollte bedeuten, dass wir auf kleineren Bildschirmen nicht ganz links und ganz rechts vom Bild sehen.

Ich habe versucht, das Bild in einem div zu enthalten und hinzuzufügen

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

Aber es geht nicht

Vielen Dank!

41
Vilarix

Das Problem liegt hier bei bootstrap CSS:

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

Nach dem Setzen von max-width: 100%; Das Bild wird nicht größer als das Ansichtsfenster. Sie müssen dieses Verhalten in Ihrem CSS überschreiben:

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

Beachten Sie das max-width: none; unten hinzugefügt. Dies ist der Standardwert für die maximale Breite und setzt das Limit zurück.

hier ist Ihre Geige aktualisiert.

39
scumah

Ich denke es ist besser mit CSS3 umzugehen object-fit Attribut.

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

Beispielsweise :

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

Weitere Informationen finden Sie hier: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Hoffe, das wird jemandem nützlich sein.

27
Dev

Löschen Sie das Tag img im Karussellelement 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;
}
11
claudio

Dies konnte ich erreichen, indem ich die Höhenlinie aus der Zeile carousel.css wie folgt auskommentierte:

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

Dieser Code hat endlich für mich funktioniert:

.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;
}
3
Ryan Fishel

um das Seitenverhältnis und die vollständige Abdeckung des Karussells zu erhalten:

img {
object-fit: cover;
overflow: hidden;
    }
2
Phil Lucks

Anscheinend haben die oben genannten Lösungen bei mir nicht funktioniert (ich weiß nicht warum?), Aber ich habe eine andere Problemumgehung mit Javascript gefunden.

Grundsätzlich ist dies eine langwierige Methode, funktioniert aber auch. Mit jQuery stellen Sie die Karussellhöhe auf die Breite geteilt durch ein bestimmtes Seitenverhältnis ein.

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 für mich gut zu funktionieren.

Hoffe, es funktioniert auch für Sie.

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

1
Nicholas Ang

Wie andere bereits erwähnt haben, funktioniert CSS3 gut dafür. Ich habe die volle Breite und feste Höhe für den Container verwendet, dann das Seitenverhältnis mit "Deckung" skaliert und dann den Überlauf weggeworfen:

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