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

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

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>

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

2 个答案: