适合所有CMS的文章中图片自动缩小到特定尽寸的通用JS代码

 

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

所谓通用：
1.任何CMS，且不论语言，如PHP还是ASP还是3P之外的其它P,均可使用
2.只需要把这个代码添加到内容页模板的最下方，或者直接添加到footer.htm等公共页脚模板中
3.不需要作任何编程基础，甚至连How To Make Love也不需要知道就能用
好，费话这么多，只有一点，高手请略过，下面方法及代码仅供懒得看编程、懒得改程序的懒人参考。
======
一般图片尺寸超过文章内容页文章内容显示区域宽度时虽然可以通过CSS来实现，如可以设置max-width:600px等属性的，但是浏览器兼容性有问题，又如有直接用CSS中表达式expression中通过判断图片宽高来设置CSS的，但因为涉及安全性问题，可能很多浏览器都显示不出效果。那最好的解决办法，莫过JS了，网上有一部流传的JS包括落叶博客里的这篇文章中的解决方法 ，都需要在图片中加onload属性来调用函数实现，但是这样的麻烦之处是要么需要改CMS的代码，要么需要在添加文章时手动添加，比较不省事。
下面落叶利用jquery简单实现了自动识别自动缩小的通用解决方案，其实代码很简单：
先看演示：http://jiaju.fcbao.com/yp/show-7-jianshang-18.html

1. <script language="JavaScript" src="http://www.18cms.com/Public/js/jquery-1.4.2.min.js"></script> 
2. <script language="javascript">
3. $.each($("#content img"),function(){//只需要将content这个词改成你CMS内容页显示内容的DIV的ID属性值
4.         var image=new Image();
5.         image.src=$(this).attr('src');
6.         if(image.width>0 && image.height>0){    
7.                            
8.                         if(image.width>=600){ 
9.                                 
10.                                  $(this).attr('width',600);  
11.                                   
12.                                  $(this).attr('height',(image.height*600)/image.width);   
13.                                 
14.                                 
15.                         } 
16.                 }   
17.         });
18.  
19. </script>

上面代码唯一需要改的地方就是上面注释的。代码的意思是：查找文章内容页中id=content的DIV区域中的图象，并判断宽度，如果宽度大于600则等比例缩小。
代码只需要添加到模板的最下方即可。引用的18cms的js可以自己保存，当然很多CMS如PHPCMS、DEDECMS都已经加截了jquery.min.js了，上面第一行要不加。
作者：落叶 18cms 首发5a.com
本来准备加个18cms的链接的，但考虑到还是为版主省点事，因为他肯定又要编辑掉，链接见签名