图片缩放显示,不变形

 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 οnlοad="AutoResizeImage(0,0,this)<br />
39 <a href="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img src="https://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 οnlοad="AutoResizeImage(250,0,this)"<br />
42 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://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 οnlοad="AutoResizeImage(0,250,this)"<br />
45 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://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 οnlοad="AutoResizeImage(250,250,this)"<br />
48 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://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 οnlοad="AutoResizeImage(400,512,this)"<br />
51 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://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 οnlοad="AutoResizeImage(300,600,this)"<br />
54 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://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 οnlοad="AutoResizeImage(500,600,this)"<br />
58 <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://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  

 

转载于:https://www.cnblogs.com/huanglibin/p/3195913.html

你可能感兴趣的:(图片缩放显示,不变形)