利用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>  
<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>

整个网页的源码如下:
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>  

你可能感兴趣的:(JavaScript,职场,休闲)