BorderJ's Blog

--- java FreeBsd Web3D open-sources

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  8 随笔 :: 1 文章 :: 40 评论 :: 0 Trackbacks
通过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             <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
posted on 2006-07-03 12:13 BorderJ 阅读(2055) 评论(3)  编辑  收藏 所属分类: Java

评论

# re: 通过js等比扩大图片的比例 2006-07-03 17:10 johnson duan
好像不用这么复杂吧,在img的那里根据容器的大小要求,只设定weight或者height就应该可以得到这样的效果了。  回复  更多评论
  

# re: 通过js等比扩大图片的比例 2006-07-03 18:02 Border's Blog
一般是按照你所说的进行处理,img是拉伸到容器中的。
但是在当图片过宽或过高时,显示的效果就会不好。
现在我想要的效果是, 当 img的weight 达到容器的weight, 而height还可以再向外拉伸的时候, 就按照img和容器的weight来确定比例,是图片来按照这个比例来扩大或缩小。  回复  更多评论
  

# re: 通过js等比扩大图片的比例 2007-01-02 13:08 文鲸
啊   回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: