2017-02-02 12 views
1

フレックスボックスで同じサイズの画像を作成しようとしています。私は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>

答えて

1

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

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

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

revised codepen

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

revised codepen

2

はここ割合を維持し、スライド内の各画像を中心に、別のオプションです。 background-imageを使用しない限り、これはおそらくそれと同じくらい良いでしょう。これは、コンテナの内側にフィットする場合にはより柔軟です。

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

+1

'background-image'は' img'タグよりも柔軟性の高い方法です。 – Adam

+0

@Adam確かに、良い先生。 –

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

希望します。

関連する問題