下面方法可以實現等比例縮放：
1． 把Image的Width和Height屬性刪除。
2. 把下面js代碼複製在Image後面（注意：這裡假設你的Image名稱叫“Image1”如果不同請把它改過來，圖片按等比例縮放成200×200）。 原始碼複製(IE有效)列印關於
- <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>
<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>
整個網頁的源碼如下： 原始碼複製(IE有效)列印關於
- <!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="Spring.jpg" 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>
