图片自适应大小的通用JS代码

前几天群里碰到好几个在调整内容页图片尺寸太大时自动缩小的问题，今天我在做一个别墅设计相关网站时，也碰到了这个问题，所以考虑了个通用的解决方案。

　　所谓通用，即：

　　1、任何CMS均可使用；

　　2、只需要把这个代码添加到内容页模板的最下方，或者直接添加到footer.htm等公共页脚模板中；

　　3、不需要任何编程基础就能使用。

　　好，费话这么多，只有一点，高手请略过，下面方法和代码仅供懒得看编程、懒得改程序的懒人参考。

　　一般图片尺寸超过文章内容页文章内容显示区域宽度时虽然可以通过CSS来实现，如可以设置max-width:600px等属性，但是浏览器兼容性有问题，又如直接用CSS中表达式expression中通过判断图片宽高来设置CSS的，但因为涉及安全性问题，可能很多浏览器都显示不出效果。那最好的解决办法，莫过JS了，网上有一部流传的JS包括落叶博客里的这篇文章中的解决方法 ，都需要在图片中加onload属性来调用函数实现，但是这样的麻烦之处是要么需要改CMS的代码，要么需要在添加文章时手动添加，比较麻烦。

　　下面就是利用jquery简单实现自动识别且自动缩小图片的通用解决方案：

<script language="JavaScript" src="http://www./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，上面第一行可以不要。