通过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
事例代码：
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(); // 图片对象
32 var tempwidth;
33 var tempheight;
34
35 var rate; // 扩大率
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