首页 >web前端 >html教程 >jQ处理页面中尺寸过大的图片_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:50:241424浏览

这是一个非常实用的功能,在网页里难免会出现一些尺寸过大的图片,会将页面撑开或者图片被部分隐藏,我们通常会用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 为选择器,根据实际网页结构进行修改,比如下面的结构:


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


 

三、兼容性:

 

做兼容性测试是必不可少的步骤,毕竟浏览器品种也太杂了。我这里在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)});

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

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn