通过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; //改变图片高
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
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