用jquery控制图片的最大宽度

有时候我们在网页中插入图片，图片会被撑开外部的容器，溢出到外面。css中有一个属性为max-width，max-width 定义元素的最大宽度。W3C在其官方文档中说“所有主流浏览器都支持 max-width 属性。”扯淡，IE6就不支持该属性，图片照样被撑开。IE下，图片会直接把外框撑宽。所以，在做IE兼容的时候大家都用js控制，现在分享下使用jquery控制图片宽度的方法。

主代码如下：

   
   

    
    <script>
   
   
   
   

    
    $(window).load(function() {  //容器内所有图片超过宽度等比例缩小，不能用$(document).ready( 
   
   
   
   

    
        $(".ny_news_ct img").each( function() {
   
   
   
   

    
    			var maxwidth = 670;
   
   
   
   

    
    			var _height=parseInt($(this).height()/$(this).width()*670);
   
   
   
   

    
    			//alert(_height);
   
   
   
   

    
    		  if ($(this).width() > maxwidth) {
   
   
   
   

    
    				$(this).css("width",670+"px");
   
   
   
   

    
    				$(this).css("height",_height+"px");
   
   
   
   

    
    		  }
    
    	
   
   
   
   

    
    	});  
   
   
   
   

    
    });
   
   
   
   

    
    </script>
   
   

代码不用解释，值得注意的是两个地方：

第一：$(window).load(function() {  

声明事件的部分使用$(window).load，不能使用$(document).ready。

我在百度和iteye网站看到有相关的文章，方法都是错误的。根本不起作用。

第二：$(".cont img").each( function() 

这里是.each( function() { ....  }),each在这里是对指定的图片集合对象逐一调用下面的方法。

这种方法兼容大部分的浏览器，效果也很便捷。

个人感觉这种方法比较顺手，另外，可以拓展为缩略图的控制方法。具体做法参考http://zww.me/archives/25474