Question

我正在尝试使用flexbox获得相同大小的图像。我将display: flex;提供给我的slick-track容器，然后flex: 1 0 auto提供给我的img。我认为如果flex-grow 1 $(".image-carousel").slick({ // autoplay: true, dots: true, slidesToShow:3, });我的图像太小而且没有发生，我的图像会增加。

the codepen here

.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>

post.md

Answer 1

这是另一种选择，保持幻灯片中每个图像的比例和居中。除非你使用background-image，否则它可能会很好，这在装入容器内部时更灵活。

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

Answer 2

我建议你限制滑块（主容器）的宽度，所以幻灯片，我的意思是图片，不要太大。

然后将你给img的params移动到它的父元素。

if (myControl.InvokeRequired)
{
    myControl.Invoke((MethodInvoker) delegate {this.Text = "Updated";});
}

希望它有所帮助。

Answer 3

请记住，flex属性仅适用于父级和子级。

display: flex上有.slick-track。这意味着弹性相等高度特征（align-items: stretch）将应用于子元素（.slick-slide）。

这些子元素（弹性项目）的高度确实相等 - 一旦你移除它们上的height: 100%，它就会覆盖相同高度的特征。

revised codepen

您的img元素是灵活容器的后代，但不是子元素，因此它们无法识别弹性属性。您需要为每个父级设置一个Flex容器，使图像为全高。

revised codepen

与flexbox相同的高度图像

3 个答案: