Erledigt - Verzogene Bilder bei Bootstrap Carousel

[hierkarl]

Guten Abend,

auf lksz.ch habe ich folgendes Problem:
den Header (oder auch Carousel genannt) möchte ich eigentlich wie den rest der Seite responsiv gestalten, jedoch wollen die Bilder nicht, sie werden einfach nur zusammengestossen bzw. ausseinandergezogen. Wie bekomme ich es hin, dass die Bilder sich einfach nach aussen "wegschieben". bzw. ausseinanderziehen. Halt proportional.

Wäre froh um eure hilfe.

Liebe Grüsse
karl

 

[lachender_engel]

Der Grund für den Effekt ist, weil Du im CSS .carousel-inner > .item > img
min-width: 100% hast.
Das heißt, dass Bild ist IMMER 100% breit (volle Breite des Bildschirms). Da Du gleichzeitg ein height: 500px; drinnen hast, verändert sich nur die Breite prozentual, die Höhe bleibt jedoch auf 500px.
Du musst die beiden Parameter wie folgt ändern:

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

Damit passt sich das BIld in der Breite dem Fenster an und die Höhe wird daraus automatisch/proportional generiert.

 

[hierkarl]

Hallo lachender_engel

vielen dank für deine Antwort, es hat so funktioniert.

lg grüsse
karl