div容器内的滑块图像不能基于窗口大小调整大小
div容器内的滑块图像不能基于窗口大小调整大小
提问于 2018-05-30 20:32:49
我在我的网站上使用滑块来显示6个最新的帖子。通常，在滑块内容上，有图片、帖子标题、类别、分享等(我指的是iflscience homepage)。
问题是，如果图像被精确地放在滑块之后，图像大小将响应于窗口大小。
我使用的是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的大小取决于图片的大小，所以平滑的滑块高度根本不会改变。但我没有任何线索来解决这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-30 20:37:36
Div的默认位置是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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50604781
复制相关文章
相似问题