通过js等比扩大图片的比例

通过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 

  BY: Border
 borderj#gmail.com
http://www.blogjava.net/border