i toggling 2 images, small icon (pic1_off.png) , larger image (pic1_on.png) in page of text. 2 images toggle between each other ok, larger image big. want 40% of page width displaying left , responsive screen size changes. 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 larger image not resizing nor why not responsive. welcome.
try
img.img-swap { max-width: (add pixel value) width:40%; height: auto; }
