与 flexbox 相同高度的图像

Question

我正在尝试使用 flexbox 获得相同大小的图像。我将display: flex; 给我的slick-track 容器，然后将flex: 1 0 auto 给我的img。我认为如果 flex-grow 和 1 太小，我的图像会增加，但它没有发生。

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>

Answer 1

请记住，flex 属性仅在父级和子级之间有效。

您在.slick-track 上有display: flex。这意味着 flex 等高功能 (align-items: stretch) 将应用于子元素 (.slick-slide)。

这些子元素（弹性项目）确实是等高的——一旦你删除了它们上的height: 100%，它就会覆盖等高功能。

revised codepen

您的 img 元素是 flex 容器的后代，但不是子元素，因此它们无法识别 flex 属性。您需要为每个父级设置一个 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 */
}

希望对你有帮助。