jQuery处理页面图片等比缩放

说明: 页面中经常需要将未知大小的图片展示在有限的空间里, 如果直接指定图片的width和height值, 就有可能造成图片走样, 这段代码就是为解决这个问题设计.

html代码结构:

<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);
				}
			});
		});
	});
});