gleiche Höhe Bilder mit Flexbox

Question

Ich versuche, gleiche Größe Bilder mit Flexbox zu haben. Ich gebe einen display: flex; zu meinem slick-track Container und dann flex: 1 0 auto zu meinem img. Ich dachte, dass mit einem flex-grow von 1 mein Bild wird zunehmen, wenn sie zu klein sind, aber es ist nicht passiert.

the codepen here

$(".image-carousel").slick({ 
 
    // autoplay: true, 
 
    dots: true, 
 
\t slidesToShow:3, 
 
\t 
 
});

.slick-track { 
 
    display: flex; 
 
} 
 
.slick-track .slick-slide img { 
 
    flex: 1 0 auto; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="image-carousel"> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/gene-300x168.jpg" alt="noo"> 
 
     <figcaption class="elementor-image-carousel-caption">gene</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/chimie-300x225.jpeg" alt="chimie"> 
 
     <figcaption class="elementor-image-carousel-caption">chimie</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide "> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/cerveau-300x180.jpg" alt="cerveau"> 
 
     <figcaption class="elementor-image-carousel-caption">cerveau</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/cropped-Science-300x300.jpg" alt="mpo"> 
 
     <figcaption class="elementor-image-carousel-caption">cropped-Science.jpg</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/ordi-300x169.jpg" alt="pôo"> 
 
     <figcaption class="elementor-image-carousel-caption">ordi</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide "> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/astro-300x188.jpg" alt="captiopn 1"> 
 
     <figcaption class="elementor-image-carousel-caption">astro</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/Einstein-300x169.jpg" alt="roo"> 
 
     <figcaption class="elementor-image-carousel-caption">Einstein</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/gene-300x168.jpg" alt="noo"> 
 
     <figcaption class="elementor-image-carousel-caption">gene</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/chimie-300x225.jpeg" alt="chimie"> 
 
    <figcaption class="elementor-image-carousel-caption">chimie</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/cerveau-300x180.jpg" alt="cerveau"> 
 
     <figcaption class="elementor-image-carousel-caption">cerveau</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/cropped-Science-300x300.jpg" alt="mpo"> 
 
     <figcaption class="elementor-image-carousel-caption">cropped-Science.jpg</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/ordi-300x169.jpg" alt="pôo"> 
 
     <figcaption class="elementor-image-carousel-caption">ordi</figcaption> 
 
    </figure> 
 
    </div> 
 
    <div class="slick-slide"> 
 
    <figure class="slick-slide-inner"> 
 
     <img class="slick-slide-image" src="http://parnasse.ovh/wp-content/uploads/2015/12/astro-300x188.jpg" alt="captiopn 1"> 
 
     <figcaption class="elementor-image-carousel-caption">astro</figcaption> 
 
    </figure> 
 
    </div> 
 
</div>

Answer 1

Beachten Sie, dass Flex-Eigenschaften nur zwischen Eltern und Kind arbeiten.

Sie haben display: flex unter .slick-track. Dies bedeutet, dass das Feature "flex full height" (align-items: stretch) für die untergeordneten Elemente gilt (.slick-slide).

Und diese Kindelemente (Flex-Elemente) sind in der Tat gleiche Höhe –, sobald Sie die height: 100% auf ihnen entfernen, die die gleiche Höhe-Funktion überschreibt.

revised codepen

Ihre img Elemente sind Nachkommen des flexiblen Behälter, aber keine Kinder, so dass sie nicht erkennen, Biegeeigenschaften. Sie müssen jeden Elternteil zu einem flexiblen Container machen, damit die Bilder die volle Höhe haben.

revised codepen

Answer 2

Hier ist eine weitere Option, den Anteil zu erhalten und jedes Bild in der Dia Zentrierung. Dies ist wahrscheinlich so gut wie es geht, wenn Sie background-image verwenden, die flexibler ist, wenn es darum geht, in einem Container zu passen.

https://codepen.io/anon/pen/pRLXxz

Answer 3

Ich würde Sie vorschlagen, um die Breite des Schiebers (der Hauptbehälter), so dass die Folien zu begrenzen, meine ich die Bilder, nicht so groß sein.

Dann verschieben Sie die Parameter, die Sie dem Img gegeben haben, zu seinem übergeordneten Element.

.slick-track { 
    display: flex; 
} 
.slick-slide { 
    flex: 1 0 auto; 
    align-items: center; 
    justify-content: center; 
} 
.slick-slide img { 
    width: 100%; 
} 
.elementor-image-carousel-caption { 
    text-align: center; /* just for aesthetics */ 
} 

Hoffe, es hilft.