フレックスボックスで同じ高さの画像

Question

フレックスボックスで同じサイズの画像を作成しようとしています。私はdisplay: flex;を私のslick-trackのコンテナに与え、次にflex: 1 0 autoを私のimgに与えます。私はflex-growが1であると思っていましたが、小さすぎるとイメージが大きくなりますが、それは起こらなかったでしょう。

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

Flexプロパティは、親と子の間で働くことに留意してください。

display: flexは.slick-trackです。これは、フレックス等高関数（align-items: stretch）が子要素（.slick-slide）に適用されることを意味します。

これらの子要素（フレックスアイテム）は、同等の高さ機能を無効にするを削除すると、実際には高さが–になります。

revised codepen

あなたimg要素は、フレックスコンテナの子孫ではなく、子どもたちなので、Flexプロパティを認識しません。イメージをフルハイトにするには、各親をフレックスコンテナにする必要があります。

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

希望します。