Question

我在我的网站上使用光滑滑块显示6条最新帖子。通常，在光滑滑块内容上，有图像，帖子标题，类别，共享等（我参考iflscience homepage）。

问题是，在光滑滑块后图像被精确放置，图像大小将响应窗口大小

我使用2个slideToShow设置，在光滑滑块

之后，会在低于一定宽度后重新设置为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我们可以通过将容器设置为内联或内联块并将宽度设置为{{}来解决此问题1}}

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

100%

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容器内的Slick-Slider图像不会根据窗口大小调整

1 个答案: