通用的jquery图片大小自适应代码
所谓通用，即：
1、任何CMS均可使用；
2、只需要把这个代码添加到内容页模板的<head></head>之间，$('#content img)可以指定自适应某一区域的图片，$('img')就是整个网页的所有图片了；
3、不需要任何编程基础就能使用。
var max_width=650;
$("#content img").each(function(){
if($(this).width() > max_width) {
var ratio=max_width/$(this).width();
$(this).width(max_width);
var imgheight=$(this).height()*ratio;
$(this).height(imgheight);
}
});
第二种 ============================
所谓通用，即：
1、任何CMS均可使用；
2、只需要把这个代码添加到内容页模板的最下方，或者直接添加到footer.htm等公共页脚模板中；
3、不需要任何编程基础就能使用。
一 般图片尺寸超过文章内容页文章内容显示区域宽度时虽然可以通过CSS来实现，如可以设置max-width:600px等属性，但是浏览器兼容性有问题， 又如直接用CSS中表达式expression中通过判断图片宽高来设置CSS的，但因为涉及安全性问题，可能很多浏览器都显示不出效果。
那最好的解决办法，莫过JS了，网上有一部流传的JS包括落叶博客里的这篇文章中的解决方法，都需要在图片中加onload属性来调用函数实现，但是这样的麻烦之处是要么需要改CMS的代码，要么需要在添加文章时手动添加，比较麻烦。
下面就是利用jquery简单实现自动识别且自动缩小图片的通用解决方案：
<script language="JavaScript" src="http://www.zzsky.cn/effect/images/jquery-1.4.2.min.js"></script>
<script language="javascript">
$.each($("#content img"),function()
{//把“content”修改为内容页显示内容的DIV的ID属性值
var image=new Image();
image.src=$(this).attr('src');
if(image.width>0 && image.height>0)
{ if(image.width>=600)
{
//三处“600”修改为需要等比例缩小的最大图片宽度
$(this).attr('width',600);
$(this).attr('height',(image.height*600)/image.width);
}
}
}
);
</script>
上面代码需要修改的地方就是上面注释的两处。代码的意思是：查找文章内容页中id=content的DIV区域中的图片，并判断宽度，如果宽度大于指定宽度（如600）则等比例缩小。
代码只需要添加到模板的最下方即可。调用的js可以自己保存，当然很多CMS如PHPCMS、DEDECMS都已经加截了jquery.min.js，上面第一行可以不要。
发表回复