利用javascript实现图片等比例缩放

关键字: 图片等比例缩放, javascript
下面方法可以实现等比例缩放：
1． 把Image的Width和Height属性删除。
2.　把下面js代码复制在Image后面（注意：这里假设你的Image名称叫“Image1”如果不同请把它改过来，图片按等比例缩放成200×200）。
Js代码
  1. <script language="javascript" type="text/javascript">    
  2. function DrawImage()    
  3. {    
  4.     var FitWidth = 200,FitHeight = 200;   
  5.     var ImgD = document.getElementById('Image1');   
  6.     var image = new Image();   
  7.     image.src=ImgD.src;   
  8.     if(image.width>0 && image.height>0)    
  9.     {    
  10.         if(image.width/image.height>= FitWidth/FitHeight)    
  11.         {    
  12.             if(image.width>FitWidth)    
  13.             {    
  14.                 ImgD.width=FitWidth;    
  15.                 ImgD.height=(image.height*FitWidth)/image.width;    
  16.             }    
  17.             else    
  18.             {    
  19.                 ImgD.width=image.width;    
  20.                 ImgD.height=image.height;    
  21.             }    
  22.         }    
  23.         else    
  24.         {    
  25.             if(image.height>FitHeight)    
  26.             {    
  27.                 ImgD.height=FitHeight;    
  28.                 ImgD.width=(image.width*FitHeight)/image.height;    
  29.             }    
  30.             else    
  31.             {    
  32.                 ImgD.width=image.width;    
  33.                 ImgD.height=image.height;    
  34.             }    
  35.         }    
  36.     }    
  37. }    
  38.   
  39. DrawImage();   
  40. </script>  

整个网页的源码如下：
Html代码
  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=gb2312" />  
  5. <title>图片等比例绽放</title>  
  6. </head>  
  7. <body>  
  8. <img src="Spring.jpg" id="Image1"/>  
  9. </body>  
  10. </html>  
  11. <script language="javascript" type="text/javascript">    
  12. function DrawImage()    
  13. {    
  14.     var FitWidth = 200,FitHeight = 200;   
  15.     var ImgD = document.getElementById('Image1');   
  16.     var image = new Image();   
  17.     image.src=ImgD.src;   
  18.     if(image.width>0 && image.height>0)    
  19.     {    
  20.         if(image.width/image.height>= FitWidth/FitHeight)    
  21.         {    
  22.             if(image.width>FitWidth)    
  23.             {    
  24.                 ImgD.width=FitWidth;    
  25.                 ImgD.height=(image.height*FitWidth)/image.width;    
  26.             }    
  27.             else    
  28.             {    
  29.                 ImgD.width=image.width;    
  30.                 ImgD.height=image.height;    
  31.             }    
  32.         }    
  33.         else    
  34.         {    
  35.             if(image.height>FitHeight)    
  36.             {    
  37.                 ImgD.height=FitHeight;    
  38.                 ImgD.width=(image.width*FitHeight)/image.height;    
  39.             }    
  40.             else    
  41.             {    
  42.                 ImgD.width=image.width;    
  43.                 ImgD.height=image.height;    
  44.             }    
  45.         }    
  46.     }    
  47. }    
  48.   
  49. DrawImage();   
  50. </script>  
posted @ 2008-12-10 16:07  小麻雀  阅读(1269)  评论(1)  编辑  收藏  举报