Bootstrap-Wechsel-Karussell Höhe

Habe ich ein jsfiddle hier - http://jsfiddle.net/gh4Lur4b/8/

Es eine volle Breite bootstrap-carousel.

Ich würde gerne um die Höhe zu ändern und immer noch halten Sie es in voller Breite.

Wird die Höhe bestimmt durch die Höhe des Bildes.

Wie kann ich chanhe der Höhe von Karussell und halten Sie es 100% Breite.

    .carousel-inner{
       //height: 300px;
    }

    .item, img{
        height: 100% !important;
        width:  100% !important;
        border: 1px solid red;
    }
InformationsquelleAutor ttmt | 2015-02-18
  1. 23

    Sollten die folgenden arbeiten

    .carousel .item {
  height: 300px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

    JSFille für Referenz.

    • Das ändert nichts an der Größe des Bildes. Das Karussell mit der änderung der Größe, aber nicht das Bild. Ich denke, ich hatte gehofft, für etwas wie background-size:cover; also das Bild Strecken jsfiddle.net/gh4Lur4b/17
    • Oh, ich sehe, was du meinst. Sorry, dass war nicht klar, aus deiner ursprünglichen Frage. Bitte siehe meine aktualisierte Antwort.
    • Aber jetzt wird das Bild gestaucht, wenn das Fenster kleiner gemacht wird. In deinem jsfiddle, wenn das Fenster größer das Bild ist nicht gestreckt, sondern erweitert. Ich brauche einen ähnlichen Effekt, wenn das Fenster kleiner gemacht wird.
    • Kennen Sie diese Bilder, bevor die hand? In anderen Worten, können Sie Zugriff auf diese innerhalb der CSS?
    • Auch scheint diese Methode nicht funktionieren, wenn Sie 50% der Höhe. Wer weiß, wie zu tun? Danke.
    InformationsquelleAutor Bart Jedrocha
  2. 4

    Vom Bootstrap-4

    .carousel-item{
    height: 200px;
} 
.carousel-item img{
    height: 200px;
}
    InformationsquelleAutor Shailesh Bhardwaj
  3. 3

    Danke! Dieser Beitrag ist Sehr Hilfreich. Sie können auch hinzufügen möchten

    object-fit:cover;

    Bewahren Sie das Seitenverhältnis für unterschiedliche Fenster-Größen

    .carousel .item {
  height: 500px;
}

.item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 500px;
}
    • Das sollte ein Kommentar zur Antwort akzeptiert.
    InformationsquelleAutor Brandon Walton
Schreibe einen Kommentar