1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>最新javascript自动按比例显示图片，按比例压缩图片显示</title> 6 <script type="text/javascript"> 7 function AutoResizeImage(maxWidth,maxHeight,objImg){ 8 var img = new Image(); 9 img.src = objImg.src; 10 var hRatio; 11 var wRatio; 12 var Ratio = 1; 13 var w = img.width; 14 var h = img.height; 15 wRatio = maxWidth / w; 16 hRatio = maxHeight / h; 17 if (maxWidth ==0 && maxHeight==0){ 18 Ratio = 1; 19 }else if (maxWidth==0){// 20 if (hRatio<1) Ratio = hRatio; 21 }else if (maxHeight==0){ 22 if (wRatio<1) Ratio = wRatio; 23 }else if (wRatio<1 || hRatio<1){ 24 Ratio = (wRatio<=hRatio?wRatio:hRatio); 25 } 26 if (Ratio<1){ 27 w = w * Ratio; 28 h = h * Ratio; 29 } 30 objImg.height = h; 31 objImg.width = w; 32 } 33 </script> 34 </head> 35 <body> 36 <br /> 37 原图显示（534 X 800）<br /> 38 onload="AutoResizeImage(0,0,this)<br /> 39 <a href="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br /> 40 .按宽度250压缩,不限制高度 按比例压缩<br /> 41 onload="AutoResizeImage(250,0,this)"<br /> 42 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br /> 43 .按高度250压缩,不限制宽度 按比例压缩<br /> 44 onload="AutoResizeImage(0,250,this)"<br /> 45 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br /> 46 .按高度250宽度250 按比例压缩<br /> 47 onload="AutoResizeImage(250,250,this)"<br /> 48 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br /> 49 .高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br /> 50 onload="AutoResizeImage(400,512,this)"<br /> 51 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br /> 52 .高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br /> 53 onload="AutoResizeImage(300,600,this)"<br /> 54 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br /> 55 .如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br /> 56 原图444 x 207,压缩为 500 x 600,将保持原图显示<br /> 57 onload="AutoResizeImage(500,600,this)"<br /> 58 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br /> 59 </body> 60 </html> 61
图片缩放显示，不变形
HLb`s签名：给自己一个拼搏的理由，好好的坚持下去。