jQ处理页面中尺寸过大的图片_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:50:24

原创

1703人浏览过

这是一个非常实用的功能，在网页里难免会出现一些尺寸过大的图片，会将页面撑开或者图片被部分隐藏，我们通常会用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）高宽为空： jQ处理页面中尺寸过大的图片_html/css_WEB-ITnose

这种情况下，ie6、ie9获取的实际宽度为1，firefox获取的是800，chrome获取的是0，也就是说只有firefox能够正常运行。

2）没有高宽属性： jQ处理页面中尺寸过大的图片_html/css_WEB-ITnose

在这种情况下，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)});

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