jquery实现页面图片等比例放大缩小功能

　　<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>

　　a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 这里需要指定a标签的高宽,背景和边框为可选 */

　　脚本(jquery可自行添加):

　　$(function () {

　　var imgs = $('a>img');

　　imgs.each(function () {

　　var img = $(this);

　　var width = img.attr('width');//区域宽度

　　var height = img.attr('height');//区域高度

　　var showWidth = width;//最终显示宽度

　　var showHeight = height;//最终显示高度

　　var ratio = width / height;//宽高比

　　img.load(function () {

　　var imgWidth, imgHeight, imgratio;

　　$('<img />').attr('src', img.attr('src')).load(function () {

　　imgWidth = this.width;//图片实际宽度

　　imgHeight = this.height;//图片实际高度

　　imgRatio = imgWidth / imgHeight;//实际宽高比

　　if (ratio > imgRatio) {

　　showWidth = height * imgRatio;//调整宽度太小

　　img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);

　　} else {

　　showHeight = width / imgRatio;//调高度太小

　　img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);

　　}

　　});

　　});

　　});

　　});