让图片自适应大小的方法

昨天在和动漫网站开发人员的交流中发现一个问题,就是新闻详细页面中的图片不会自适应大小,这其实是一个非常常见的问题,目前我所知的解决办法有以下几种:
1. 用后台程序自动生成缩略图
2. 用css调用expression控制图片溢出后的大小;

http://www.blog.edu.cn/user1/7987/archives/2006/1440861.shtml

3. 用js写函数控制图片溢出后的大小;
其中后两种都是javascript在起作用,但是工作原理不同,css中调用expression可以解决这个问题,但是解决得不好,因为如果页面中图片一多,expression中的语句会不断被调用,非常耗费客户端内存,容易导致浏览器假死;而直接用javascript,在页面onload的时候就可以轻松解决这个问题,而且只调用一次,比起expression真是好得太多,程序很简单,下面是个简单的例子,我假设这个页面图片宽度不能超过200px,而实际图片宽度是550px:

  1. <script>
  2. function initImage(){
  3. var images=document.getElementsByTagName("IMG");
  4. for(i=0;i<images.length;i++){
  5.     if(images[i].offsetWidth>500){
  6.       imageRate=images[i].offsetWidth/images[i].offsetHeight;
  7.       images[i].style.width="500"+"px";
  8.       images[i].style.height=500/imageRate+"px";
  9.       }
  10.    }
  11. }
  12. </script>
  13. <body onload="initImage()">
  14. <img src="http://218.57.200.19/zmx/ziran/zhiwu/huazhiyu/5.jpg" />
  15. <a href="http://218.57.200.19/zmx/ziran/zhiwu/huazhiyu/5.jpg">查看原图</a>
  16. </body>
Leave A Comment

Bad Behavior has blocked 949 access attempts in the last 7 days.