通过css还有一种方法兼容IE6能让图片在超过规定的宽度时自动按比例缩小,但该写法不符合W3C标准。代码如下:
.cate img{
max-width: 600px;
height:auto;
width:expression(this.width > 600 ? "600px" : this.width);
}
所以在做到尽量兼容IE和其他浏览器以及符合W3C的标准下就通过js来控制图片的宽度了,下面使用jquery控制图片显示时的最大宽度,主代码如下:
$(window).load(function() {
$(".cate img").each(function() {
var maxwidth = 600;
if ($(this).width() > maxwidth) {
$(this).width(maxwidth);
}
});
});
代码很简单,就是cate样式下的所以img的最大宽度只能为600px。.each(function(){......}),each在这里是对指定的图片集合对象逐一调用下面的方法。这种jquery方法在IE6及以上浏览器和chrome及Firefox上都能实现控制图片显示时的最大宽度。
如果你的页面上图片比较多,而且图片比较大,那页面打开的速度就会很慢了。junpub做过的项目中就遇到过这样的问题,处理的方法是在上传图片的时候通过图片处理组件给图片生成一个同样名字的小图片(图片的宽度与高度自己可以设置,同样是只处理超过你设定的值的范围的才处理)放在一个文件夹下,而原始图片放在另一个文件夹下,在不需要显示大图的地方直接显示小图即可。然后在页面中使用jquery的Lazy Load插件延迟网页上的图片加载,这样页面打开的速度就能大大的提高了。