div容器内的Slick-Slider图像不调整基于窗口大小

Question

我在我的网站上使用 slick-slider 来显示 6 个最新帖子。通常，slick-slider 内容上，有图片、帖子标题、类别、分享等（我参考iflscience homepage）。

问题是，如果将图像放在 slick-slider 之后，图像大小将响应窗口大小。

我正在使用 2 个 slideToShow 设置，它将在 slick-slider 低于一定宽度后响应 1 个 slideToShow

<div class="container-body">
  <div class="slider your-class">
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
  </div>
</div>

但如果我创建一个容器来扭曲最新的帖子内容，则图像大小不会响应窗口大小。

<div class="container-body">
  <div class="slider your-class">
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div>
    <div>
      <img src="https://www.w3schools.com/bootstrap/la.jpg"/>
    </div> 
  </div>
</div>

我希望“div”内的图像像我没有使用“div”时一样动态变化。

我尝试创建一个脚本来使用height: auto 动态更改图像宽度，但有时它不起作用，这取决于我们调整大小的速度。

我明白，div 的大小将取决于图像大小，所以光滑的滑块高度根本不会改变。但是我没有任何线索可以解决它。

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Div的默认display是block，img默认位置是inline我们可以通过将容器设置为内联或内联块并将宽度设置为100%来解决这个问题

我有一个循环来设置 img-con 的宽度和 img 容器的宽度。

document.querySelectorAll('.con').forEach(el => {
  el.style.width = `${el.children.length * 100}%`;
  Array.from(el.children).forEach(img => {
    img.style.width = `${100 / el.children.length}%`
  })
})

.slider {
  overflow: hidden;
  padding: 0 10px;
  width: 50%;
}

.img-con {
  width: 100%;
  display: inline-block;
  position: relative;
  float: left;
}

.con {
  display: inline-block;
  height: auto;
}

.img-con>img {
  width: 100%;
  position: absolute;
  top: 0;
}

.img-con:before {
  content: '';
  width: 100%;
  padding-bottom: 64%;
  display: block;
}

.container-body {
  display: flex;
  flex-direction: row;
}

<div class="container-body">
  <div class="slider your-class active">
    <div class="con">
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
    </div>
  </div>

  <div class="slider your-class active">
    <div class="con">
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
      <div class="img-con">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" />
      </div>
    </div>
  </div>
</div>