我在文本页面中切换了2张图像,一个小图标(pic1_off.png)和一个更大的图像(pic1_on.png)。 2张图像可以在彼此之间切换,但较大的图像太大。我希望它是从左侧显示的页面宽度的40%,并且能够响应屏幕尺寸的变化。 HTML是:
<span class="infoToggler"><img class="img-swap" src="/templates/beez_20/images/e2tw/books/science_news/hearing_loss/pic1_off.png" align="left"></span>
JS:
jQuery(".img-swap").on('click', function() {
if (jQuery(this).attr("class") === "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
jQuery(this).toggleClass("on");
});
});
CSS:
img.img-swap {
max-width: 40%;
height: auto;
}
我无法弄清楚为什么较大的图像没有调整大小,也没有响应。任何帮助将非常欢迎。
最佳答案
尝试这个img.img-swap {
max-width: (Add a pixel value)
width:40%;
height: auto;
}
关于jquery - 图像无响应或无法调整为最大宽度值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29911385/