Slick-Slider div 容器内的图像未根据 windows 大小调整大小

Question

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

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

我正在使用 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>

但是如果我创建一个容器来扭曲 post 最新的 post 内容，图像大小将不会响应 window 大小。

<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我们可以通过设置容器为inline或者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>

Slick-Slider div 容器内的图像未根据 windows 大小调整大小

Slick-Slider image inside a div container not resize based windows size

javascript

css

jquery

slick.js