让图片自适应大小的方法
昨天在和动漫网站开发人员的交流中发现一个问题，就是新闻详细页面中的图片不会自适应大小，这其实是一个非常常见的问题，目前我所知的解决办法有以下几种：
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：
<body>
<img id="achome" src="http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg" />
</body>
<script>
var imageArr=document.getElementById(controlID);
var imageRate = imageArr.offsetWidth / imageArr.offsetHeight;
if(imageArr.offsetWidth > maxWidth)
{
imageArr.style.width=maxWidth + "px";
imageArr.style.Height=maxWidth / imageRate + "px";
}
if(imageArr.offsetHeight > maxHeight)
{
imageArr.style.width = maxHeight * imageRate + "px";
imageArr.style.Height = maxHeight + "px";
}
</script>
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：
<body><img id="achome" src="http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg" /></body><script>var imageArr=document.getElementById(controlID);
var imageRate = imageArr.offsetWidth / imageArr.offsetHeight;
if(imageArr.offsetWidth > maxWidth)
{
imageArr.style.width=maxWidth + "px";
imageArr.style.Height=maxWidth / imageRate + "px";
}
if(imageArr.offsetHeight > maxHeight)
{
imageArr.style.width = maxHeight * imageRate + "px";
imageArr.style.Height = maxHeight + "px";
}
</script>
