I'm trying to have same size images with flexbox. I give a display: flex; to my slick-track container and then flex: 1 0 auto to my img. I thought that with a flex-grow of 1 my image will increase if they are too small but it didn't happen.

the codepen here

$(".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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/wp-content/uploads/2015/12/astro-300x188.jpg" alt="captiopn 1">
      <figcaption class="elementor-image-carousel-caption">astro</figcaption>
    </figure>
  </div>
</div>

I'm trying to have same size images with flexbox. I give a display: flex; to my slick-track container and then flex: 1 0 auto to my img. I thought that with a flex-grow of 1 my image will increase if they are too small but it didn't happen.

the codepen here

$(".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>

• javascript
• html
• css
• flexbox

Share Follow edited Feb 2, 2017 at 17:49 Michael Benjamin 373k110110 gold badges613613 silver badges730730 bronze badges asked Feb 2, 2017 at 16:58 sonia makloufsonia maklouf 2,74344 gold badges2020 silver badges2929 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Keep in mind that flex properties only work between parent and child.

You have display: flex on .slick-track. This means that the flex equal height feature (align-items: stretch) will apply to the child elements (.slick-slide).

And these child elements (flex items) are indeed equal height – once you remove the height: 100% on them, which overrides the equal height feature.

revised codepen

Your img elements are descendants of the flex container, but not children, so they don't recognize flex properties. You'll need to make each parent a flex container for the images to be full-height.

revised codepen

Here's another option, maintaining proportion and centering each image within the slide. This is probably as good as it gets unless you use background-image, which is more flexible when it es to fitting inside of a container.

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

I would suggest you to limit the width of the slider (the main container) so the slides, I mean the pictures, don't be so huge.

Then move the params you gave to the img to its parent 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 */
}

Hope it helps.