Anzeige

[Erledigt] Verzogene Bilder bei Bootstrap Carousel

Erledigt - Verzogene Bilder bei Bootstrap Carousel | PSD-Tutorials.de

Erstellt von hierkarl, 17.04.2015.

  1. hierkarl

    hierkarl hierkarl

    Dabei seit:
    20.05.2014
    Beiträge:
    28
    Geschlecht:
    männlich
    Ort:
    Schweiz
    Software:
    Adobe Photoshop, Adobe Illustrator
    Verzogene Bilder bei Bootstrap Carousel
    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
     
    #1      
  2. lachender_engel

    lachender_engel Aktives Mitglied

    Dabei seit:
    23.03.2009
    Beiträge:
    1.276
    Geschlecht:
    männlich
    Ort:
    Die Welt
    Software:
    Adobe Creative Suite CS6 Design & Web, Notepad++, IrfanView, Jetbrains PhpStorm
    Kameratyp:
    Nikon D7200
    Verzogene Bilder bei Bootstrap Carousel
    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:
    Code (CSS):
    1. .carousel-inner > .item > img {
    2.     height: auto;
    3.     left: 0;
    4.     min-width: 100%;
    5.     position: absolute;
    6.     top: 0;
    7. }
    Damit passt sich das BIld in der Breite dem Fenster an und die Höhe wird daraus automatisch/proportional generiert.
     
    #2      
  3. hierkarl

    hierkarl hierkarl

    Dabei seit:
    20.05.2014
    Beiträge:
    28
    Geschlecht:
    männlich
    Ort:
    Schweiz
    Software:
    Adobe Photoshop, Adobe Illustrator
    Verzogene Bilder bei Bootstrap Carousel
    Hallo lachender_engel

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

    lg grüsse
    karl
     
    #3      
x
×
×