画像の拡大縮小表示、変形しない
21543 ワード
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