将宽度设置为 100% 以使其在 js 中响应

Question

所以我有这段代码

<div style="text-align:center; max-width:500px; width:100%; margin:auto"> <script type="text/javascript" src="transition_example.js"></script></div>

这是transition_example.js：

var show1=new slideshow({ 
wrapperid: "myslide", 
wrapperclass: "sliceClass", 
imagearray: [
["1.jpg"],
["2.jpg"]
],
pause: 9000, //pause between content change (millisec)
transduration: 1000 //duration of transition (affects only IE users)
})

我想将图像设置为以 100% 宽度显示，因此当屏幕调整大小时，js 脚本也会调整大小。

找不到实现它的方法，我真的可以使用一些帮助。

提前感谢！

Answer 1

要使图像响应其容器，假设您的容器没有固定宽度，只需向img添加width: 100%或max-width: 100%。

width: 100%将使图像与容器一样宽，并且它将随之缩放。

.sliceClass img {
width: 100%;
}

<div class="sliceClass">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

max-width: 100%将使图像响应容器，但图像width不会超出其实际宽度。

.sliceClass img {
max-width: 100%;
}

<div class="sliceClass">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

Answer 2

您可以添加此 css 以将 100% 应用于 sliceClass 生成的 img

.sliceClass {
width: 100%;
img {
width: 100%;
}
}