jQ处理页面中尺寸过大的图片_html/css_WEB-ITnose

这是一个非常实用的功能，在网页里难免会出现一些尺寸过大的图片，会将页面撑开或者图片被部分隐藏，我们通常会用css的max-width来加以 控制，但ie6却不吃这套。我在做一个站时，就遇到这种困惑，因为最近也在学习jQuery，就想到用jq来处理这个问题。经过一番思索，觉得这个问题其 实并不难，下面就具体来说：



一、思路：

要解决尺寸问题，首先要先获取图片的宽和高，然后定义一个最大宽度，进行判断，如果实际宽度大于设定的最大宽度，那么就让实际宽度等于最大宽度，至于高度就按照高宽比进行比例缩小即可。将思路整理了一下然后列出中文语句：

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

如此等等…根据需要再添加了。