!!!!!JQUERY 图片自适应宽高

1. <script type="text/javascript">   
2. //自动适应宽，原版   
3. $(function(){   
4. var maxwidth = 310;   
5. var html = '';   
6. $('.prolistshowimg a img').html(html);   
7. $(".prolistshowimg a img").each(function(i){    
8. var proImg = new Image();   
9. var image = $(this);   
10. //alert(this.src);   
11. proImg.onload = function(){   
12. if(proImg.width > maxwidth ){image.width(maxwidth);}     
13. }   
14. proImg.src = this.src;      
15. });   
16. });   
17.   
18. //自动适就宽高，改动   
19. $(function(){   
20. var max_w=172;   
21. var max_h=113;   
22. var m1=max_w/max_h;   
23. var html = '';   
24. $(".proListShow").html(html);   
25. $(".proListShow").each(function(i){   
26. var proImg = new Image();   
27. var image = $(this);   
28. //alert(this.src);   
29. proImg.onload = function(){   
30. var m2 = proImg.width/proImg.height;   
31. if(m2 > m1){   
32. image.width(max_w);   
33. }else{   
34. image.height(max_h);   
35. }   
36. }   
37. proImg.src = this.src;      
38. });   
39. });  
40. </script>   

1、自适应宽：

[html] view plaincopy

1. <div class="prolistshowimg">  
2. <a href="#">  
3. <img src="abc.jpg" />  
4. </a>  
5. </div>  

2、自适应宽高：

[html] view plaincopy

1. <img src="abc.jpg" class="proListShow" />