通過js等比擴(kuò)大圖片的比例
?
在做web開發(fā)的時(shí)候，顯示圖片是經(jīng)常用到。在默認(rèn)的情況下圖片是擴(kuò)充，但是有的時(shí)候顯示效果會(huì)不如人意。有時(shí)容器的大小是固定的，我們要把圖片等比擴(kuò)大。
下面通過js來簡(jiǎn)單的實(shí)現(xiàn)圖片等比擴(kuò)大。
?
var?imgObj?=?new?Image();?//?圖片對(duì)象
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
?
事例代碼：
?
?1?<html>
?2?<head>
?3?
?4?<meta?http-equiv="Content-Type"?content="text/html;?charset=GB2312">
?5?</head>
?6?<body?onload?=?changesize()>
?7?<center>?images:
?8?
?9????????<table?border="1"?width="445"?height="140"?bordercolor="#FF6600"?cellSpacing=0?cellPadding=0>
10?
11?????????<HR?style="border:1?dashed?green"?width="100%"?SIZE=4>
12?????????<tr>
13?
14???????????<td>
15?
16?????????????<p?align="center">??????
17?
18???????????????<img?name="myimg"?src="d:\linuxborder.jpg"?width="440"?height="140"></p>
19?
20???????????</td>
21?????????</tr>
22?
23???????</table>
24?</center>
25?</body>
26?
27?<script?language="javascript"?type="text/javascript">
28?function?changesize(){
29?????????var?imgwidth;
30?????????var?imgheight;
31?????????var?imgObj?=?new?Image();?//?圖片對(duì)象
32?????????var?tempwidth;
33?????????var?tempheight;
34?
35?????????var?rate;?????//?擴(kuò)大率
36?????????
37?
38?????????imgObj.src?=?"d:\linuxborder.jpg"?;?//?圖片地址
39?????????imgwidth?=?imgObj.width;???//?圖片寬
40?????????imgheight?=?imgObj.height;??????//?圖片高
41?????????
42?????????tempwidth?=?440?-?imgwidth;
43?????????tempheight?=?140?-?imgheight;
44?????????if(tempwidth?<?tempheight)?{
45?
46??????????????rate?=?440?/?imgwidth?;?
47?????????}?else?{
48?
49??????????????rate?=?140?/?imgheight;
50?????????}
51?????????
52?
53?????????document.all("myimg").width?=?imgwidth?*?rate;?????????????//改變圖片寬
54?
55?????????document.all("myimg").height?=?imgheight?*?rate;?????//改變圖片高
56?}????
57??
58?</script>
59?</html>
60?