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

解决了我很苦恼的图片走形问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  <html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <title>图片等比例绽放</title>  
 </head>  
 <body>  
 <img src="zz.gif" id="Image1"/>  
</body>  
 </html>  
 <script language="javascript" type="text/javascript">   
 function DrawImage()   
 {   
     var FitWidth = 200,FitHeight = 200;  
     var ImgD = document.getElementById('Image1');  
     var image = new Image();  
    image.src=ImgD.src;  
    if(image.width>0 && image.height>0)   
     {   
         if(image.width/image.height>= FitWidth/FitHeight)   
         {   
             if(image.width>FitWidth)   
             {   
                ImgD.width=FitWidth;   
                 ImgD.height=(image.height*FitWidth)/image.width;   
             }   
            else   
            {   
                 ImgD.width=image.width;   
                ImgD.height=image.height;   
             }   
         }   
         else   
        {   
            if(image.height>FitHeight)   
            {   
                ImgD.height=FitHeight;   
                 ImgD.width=(image.width*FitHeight)/image.height;   
            }   
            else   
            {   
                 ImgD.width=image.width;   
                ImgD.height=image.height;   
            }   
         }   
     }   
 }   
    
  DrawImage();  
   </script>  

 

你可能感兴趣的:(JavaScript,html,XHTML)