Scale image in div after loading complete with jQuery

Question

I have several thumbnails, and when you click on them, I have a modal box with a DIV, which I want to scale by 50% compared to a large image. I would like to know if the following scaling method and cross browser are acceptable for an 800x530px image:

#foo-img { width: 100%; height: 100%; } #foo-div { width: 400px; height: 265px; padding: 10px; background: black; } <div id="foo-div"> <img id="foo-img" src="img/003.jpg" /> </div> 

I cannot just specify the attributes # foo-img w / h, because every time I upload a new image, it is 50% smaller! Here is something that works, but it seems to me that there is a lot of code for me.

  var rnd = Math.floor(Math.random() * 101) $("a.loadimg").click(function() { // resets the DIV imgLoadReset(); var imgPath = "images/" + $(this).text() + "?" + rnd; imgLoad(imgPath); return false; }); function imgLoad(imgPath) { $("#foo-img").hide() .one('load', function() { imgLoadComplete(); }) .attr("src", imgPath) .each(function() { if(this.complete) $(this).trigger('load'); }); } function imgLoadComplete() { // after the image is completely loaded, we can get the w/h of the image var imgW = $("#foo-img").width() / 2; var imgH = $("#foo-img").height() / 2; // set div to half image size $("#foo-div").css({ "width": imgW, "height": imgH }); // this should scale the image inside the div $("#foo-img").css({ "width": "100%", "height": "100%" }); $("#foo-img").show(); } function imgLoadReset() { // delete w/h attributes otherwise it doesn't work $("#foo-img").css({ "width": "", "height": "" }); // clear image with a blank $("#foo-img").attr("src", "about:blank"); } 

HTML

 <div id="foo-div"> <img id="foo-img" src="about:blank" /> </div> <hr> <a class="loadimg" href="#">001.jpg</a> | <a class="loadimg" href="#">002.jpg</a> | <a class="loadimg" href="#">003.jpg</a> | <a class="loadimg" href="#">004.jpg</a> 

Answer 1

Using

 img { max-width: 100%; width: auto; height: auto; } 

for your images; specifying the desired width (in pixels) of their div containers.