圖像無響應或無法調整為最大寬度值

Question

我在文本頁面中切換了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;
}

我無法弄清楚為什么較大的圖像沒有調整大小，也沒有響應。 任何幫助將非常歡迎。

Answer 1

嘗試這個

img.img-swap { max-width: (Add a pixel value) width:40%; height: auto; }