與flexbox高度相同的圖像

Question

我正在嘗試使用flexbox具有相同大小的圖像。 我display: flex; 到我slick-track容器中，然后將flex: 1 0 auto到我的img 。 我以為flex-grow值為1如果它們太小，我的圖像就會增加，但那沒有發生。

這里的codepen

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

 .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

這是另一種選擇，保持比例並使幻燈片中的每個圖像居中。 除非您使用background-image ，否則這可能和它獲得的效果一樣好，這在安裝容器內部時更加靈活。

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

Answer 2

我建議您限制滑塊（主容器）的寬度，以使幻燈片（我的意思是圖片）不要太大。

然后將您賦予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 */
}

希望能幫助到你。

Answer 3

請記住，flex屬性僅在父級和子級之間起作用。

您已經display: flex .slick-track上的display: flex 。 這意味着.slick-slide功能（ align-items: stretch ）將應用於子元素（ .slick-slide ）。

這些子元素（彈性項目）的高度實際上是相等的-刪除height: 100%它們上的height: 100% ，將覆蓋等高功能。

修改后的代碼筆

您的img元素是flex容器的后代，但不是子代，因此它們無法識別flex屬性。 您需要為每個父對象設置一個伸縮容器，以使圖像全高。

修改后的代碼筆