одинаковые изображения высоты с flexbox

Question

Я пытаюсь иметь изображения того же размера с flexbox. Я даю display: flex; моему контейнеру slick-track, а затем flex: 1 0 auto моему img. Я думал, что с flex-grow1 мое изображение будет увеличиваться, если они слишком малы, но этого не произошло.

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

Имейте в виду, что гибкие свойства работают только между родителем и ребенком.

У вас есть display: flex на .slick-track. Это означает, что для дочерних элементов() применяется функция равномерной высоты гибкого диска (align-items: stretch).

И эти дочерние элементы (элементы гибкости) действительно равны высоте –, как только вы удаляете на них height: 100%, что переопределяет функцию равной высоты.

revised codepen

Ваши img элементы являются потомками гибкого контейнера, но не дети, поэтому они не признают гибкие свойства. Вам нужно будет сделать каждый родитель гибким контейнером, чтобы изображения были полными.

revised codepen

Answer 2

Вот еще один вариант, сохраняя пропорции и центрирование каждого изображения в слайде. Это, вероятно, так же хорошо, как и получается, если вы не используете background-image, что является более гибким, когда дело касается установки внутри контейнера.

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

Answer 3

Я хотел бы предложить вам, чтобы ограничить ширину ползунка (основной контейнер) так слайды, я имею в виду картины, не так велики.

Затем переместите параметры, которые вы передали img в его родительский элемент.

.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 */ 
} 

Надеюсь, это поможет.