通過js等比擴大圖片的比例
在做web開發的時候，顯示圖片是經常用到。在默認的情況下圖片是擴充，但是有的時候顯示效果會不如人意。有時容器的大小是固定的，我們要把圖片等比擴大。
下面通過js來簡單的實現圖片等比擴大。
var imgObj = new Image(); // 圖片對象
imgObj.src = "d:/linuxborder.jpg" ; // 圖片地址
imgwidth = imgObj.width; // 圖片寬
imgheight = imgObj.height; // 圖片高
document.all("myimg").width = imgwidth * rate; //改變圖片寬
document.all("myimg").height = imgheight * rate; //改變圖片高
“myimg”是<img name="myimg">中的name
事例代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<body onload = changesize()>
<center> images:
<table border="1" width="445" height="140" bordercolor="#FF6600" cellSpacing=0 cellPadding=0>
<HR style="border:1 dashed green" width="100%" SIZE=4>
<tr>
<td>
<p align="center">
<img name="myimg" src="d:/linuxborder.jpg" width="440" height="140"></p>
</td>
</tr>
</table>
</center>
</body>
<script language="javascript" type="text/javascript">
function changesize(){
var imgwidth;
var imgheight;
var imgObj = new Image(); // 圖片對象
var tempwidth;
var tempheight;
var rate; // 擴大率
imgObj.src = "d:/linuxborder.jpg" ; // 圖片地址
imgwidth = imgObj.width; // 圖片寬
imgheight = imgObj.height; // 圖片高
tempwidth = 440 - imgwidth;
tempheight = 140 - imgheight;
if(tempwidth < tempheight) {
rate = 440 / imgwidth ;
} else {
rate = 140 / imgheight;
}
document.all("myimg").width = imgwidth * rate; //改變圖片寬
document.all("myimg").height = imgheight * rate; //改變圖片高
}
</script>
</html>
