图像无响应或无法调整为最大宽度值

Question

I am toggling 2 images, a small icon (pic1_off.png) and a much larger image (pic1_on.png) in a page of text. The 2 images toggle between each other OK, but the larger image is too big. I want it be 40% of page width displaying from the left and to be responsive to screen size changes. The HTML is:

<span class="infoToggler"><img class="img-swap" src="/templates/beez_20/images/e2tw/books/science_news/hearing_loss/pic1_off.png" align="left"></span> 

the 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;
}

I can't work out why the larger image is not resizing nor why it is not responsive. Any help would be very welcome.

Answer 1

尝试这个

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