将宽度设置为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

您可以添加此CSS，以将100％应用于sliceClass生成的img

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

Answer 2

要使图像响应容器，假设容器没有固定的宽度，只需在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>