Jquery page image and other proportional zoom function

HTML code structure:

<a href=""><img src="images/tmp_376x470.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_409x265.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_572x367.jpg" width="300" height="300" alt=""/></a>

Style:

a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} 
 The script (jquery self-addenable ):

$(function () {
    var imgs = $('a>img');
    imgs.each(function () {
        var img = $(this);
        var width = img.attr('width');//The width of the area
        var height = img.attr('height');//Regional height
        var showWidth = width;//Final display width
        var showHeight = height;//Final display height
        var ratio = width / height;//Aspect ratio
        img.load(function () {
            var imgWidth, imgHeight, imgratio;
            $('<img />').attr('src', img.attr('src')).load(function () {
                imgWidth = this.width;//Actual picture width
                imgHeight = this.height;//Actual height of picture
                imgRatio = imgWidth / imgHeight;// The actual Aspect ratio
                if (ratio > imgRatio) {
                    showWidth = height * imgRatio;//Adjust width too small
                    img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);
                } else {
                    showHeight = width / imgRatio;//Too low
                    img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
                }
            });
        });
    });
});

This is to achieve the image of equal scale zoom in and out.