1. css直接实现: img{max- 600px;} (IE6.0不支持此属性)
2. expression实现: img{expression(width>600?"600px":this.width+"px");}
3. 使用js.方法在onload事件中处理
昨天在和动漫网站开发人员的交流中发现一个问题，就是新闻详细页面中的图片不会自适应大小，这其实是一个非常常见的问题，目前我所知的解决办法有以下几种：
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"
onload="SetImageMaxWH('achome',100,200)" />
</body>
<script>
function SetImageMaxWH(imageName,maxWidth,maxHeight)
{
var imageArr=document.getElementById(imageName);
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、简单的按比例缩放图片：
设置好图片的宽度，图片就会自动缩放高度。比如：<img src="http://img93.pp.sohu.com/images/blog/2006/10/21/17/7/10efe26831e.jpg" onload='javascript:if(this.width>180)this.width=180' alt="用户头像" />
或者：
if(width>164){
imgObj.width=164;
imgObj.height=imgObj.height/(imgObj.width/164);
}
缺点就是不能控制高度。
2、完全可控制的按比例缩放图片：
function ResizeImage(obj, MaxW, MaxH) {
if (obj != null) imageObject = obj;
var state=imageObject.readyState;
if(state!='complete') {
setTimeout("ResizeImage(null,"+MaxW+","+MaxH+")",50);
return;
}
var oldImage = new Image();
oldImage.src = imageObject.src;
var dW=oldImage.width;
var dH=oldImage.height;
if(dW>MaxW || dH>MaxH)
{ a=dW/MaxW; b=dH/MaxH; if(b>a) a=b; dW=dW/a; dH=dH/a; }
if(dW > 0 && dH > 0)
{ imageObject.width=dW; imageObject.height=dH; }
}
调用方法：<img oncontextmenu="return false;" id="photoImg" name="photoImg" src="images/images.gif" onclick="openPicWin(this.src)" onload="ResizeImage(this,400,253);">
ResizeImage(this,400,253)调用中 this是图片的路径，400和253分别是自己设定的宽度和高度。如果宽度<400,高度<253，图片就显示原来的大小。相反如果图片宽度>400图片宽度就缩小到400，这个时候如果高度>253图片会继续按比例缩放，直到进入到400和253的范围之内。