scale image in div after load complete with jQuery

Question

I have some thumbnails and when you click on them I have a Modal box with a DIV that I want to scale 50% w/h from the bigger image.
I would like to know if the following method for scaling is valid and cross-browser for an image of 800x530px:

#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 can't seem to just set the #foo-img w/h attributes as every time I load a new image it's 50% smaller! Here is something that works, but it seems an awful lot of code to 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>