一、思路：
要解决尺寸问题，首先要先获取图片的宽和高，然后定义一个最大宽度，进行判断，如果实际宽度大于设定的最大宽度，那么就让实际宽度等于最大宽度，至于高度就按照高宽比进行比例缩小即可。将思路整理了一下然后列出中文语句：
1） 设定最大宽度
2） 获取图片宽度
3） 获取图片高度
4） 定义高度的比例关系（新的高度 = 高 / 宽 * 设定的宽度）
5） 判断，如果宽度>设定的最大宽度
6） 那么宽度=最大宽度；高度=新的高度
7） 结束
二、代码：
将上面中文语句写成完整jQ语句：
$(function() {
$('.content img').each(function() {
var maxWidth = 600;
var width = $(this).width();
var height = $(this).height();
var newHeight = height / width * maxWidth;
if(width > maxWidth) {
$(this).width(maxWidth);
$(this).height(newHeight);
}
});
});
这里面 .content img 为选择器，根据实际网页结构进行修改，比如下面的结构：
三、兼容性：
做兼容性测试是必不可少的步骤，毕竟浏览器品种也太杂了。我这里在ie6、ie9、firefox、chrome下做了测试，很好很成功!
但思考问题不能太局限，因为代码中首先要获取图片的宽和高，如果未定义高和宽，那还能否正常？
毛教导我们?实际出真知！疑问当然要实际测试才能知道，我在jq中添加 alert(width); 看看浏览器会告诉我们什么。
1）高宽为空：
这种情况下，ie6、ie9获取的实际宽度为1，firefox获取的是800，chrome获取的是0，也就是说只有firefox能够正常运行。
2）没有高宽属性：
在这种情况下，ie6、ie9和firefox获取值均为800，chrome获取的是0，也就是说ie9和firefox正常，chrome失败了，一向受人崇拜的chrome让人有点失望。
由此来看，在网站设计时，应该将图片的高宽属性正确添加进来，才能使用前面的jq来控制图片的尺寸。
四、功能扩展：
好啦，前面的代码已经能够对尺寸过大的图片加以控制了，那么在此基础上再进行一些扩展。
1），如果尺寸过大，给图片添加css类：
$(this).addClass("bigpic");
2），如果尺寸过大，设置图片的css：
$(this).css("cursor","pointer");
3），如果尺寸过大，设置图片的属性：
$(this).attr("title","点击放大");
4），如果尺寸过大，让其点击后在新窗口打开原图：
$(this).click(function(){window.open(this.src)});
如此等等…根据需要再添加了。
下载本文