让图片自适应大小的方法
昨天在和动漫网站开发人员的交流中发现一个问题,就是新闻详细页面中的图片不会自适应大小,这其实是一个非常常见的问题,目前我所知的解决办法有以下几种:
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:
下载: initImage.html
- <script>
- function initImage(){
- var images=document.getElementsByTagName("IMG");
- for(i=0;i<images.length;i++){
- if(images[i].offsetWidth>500){
- imageRate=images[i].offsetWidth/images[i].offsetHeight;
- images[i].style.width="500"+"px";
- images[i].style.height=500/imageRate+"px";
- }
- }
- }
- </script>
- <body onload="initImage()">
- <img src="http://218.57.200.19/zmx/ziran/zhiwu/huazhiyu/5.jpg" />
- <a href="http://218.57.200.19/zmx/ziran/zhiwu/huazhiyu/5.jpg">查看原图</a>
- </body>
