做网页、论坛贴图、写部落格。只要有需要上传图片的机会，就一定常碰到这问题。一旦不小心上传一个大于版面的图片，轻则内容被盖住，重则排版全乱掉，画面惨不忍睹。
一般的css处理方法都是靠 over-flow:hidden; 来达成的。但这样做有个缺点，跑出去的内容会被隐藏起来。如果文字跟着被隐藏的话就看不到了。
div下图片自适应解决方法1(只支持firefox浏览器)
在这里提供一个同样用css的解决办法吧，能够自动调整图片大小。其实在Mozilla系列浏览器中都支持Max与Min的大小设定，只要css做这样处理，就能限定任何元素的最大或最小长宽。
不过伟大的Microsoft硬是不支持这指令，我们只好拉长程序代码啦，整个代码变得落落长，因为插入了javascript在里面。
请先打开你的网站css档案，输入下面的代码：
img { max-width:600px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 600)?"600px":"auto"}); }
你可以将600设为任何你要的宽度
若只想限定某个区域中的图片，请输入：
#div img { max-width:600px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 600)?"600px":"auto"}); }
#div就是那个区域的id，意思是＃div底下所有卷标为img的元素皆适用这个设定。如此应该就能看到成效了
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在 ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max- width:780px;以及下面那行。
固定像素适应:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0px; padding: 0px; } #pic{ margin:0 auto; width:800px; padding:0; border:1px solid #333; } #pic img{ max-width:780px; width:expression_r(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html>
百分比适应:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0px; padding: 0px; } #pic{ margin:0 auto; width:800px; padding:0; border:1px solid #333; } #pic img{ max-width:780px; width:expression_r(document.body.clientWidth>document.getElementByIdx_x_x("pic").scrollWidth*9/10? "780px": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html>
提醒:
1 该方法不只是用于img;
2 max-width,max-height,min-width,min-height.
div下图片自适应解决方法2
<img onload=""if(this.width>700) {this.resized=true; this.width=600;}
div下图片自适应解决方法3(javascript实现方法)
//图片自适应大小并绝对居中对齐
//函数 fImgageAuto
//能在同一个ID下对单独图片进行自适应外框大小
//Ver 2.1 最后更新07/08/27 by Amilim
function fImageAuto(nID,nMaxWidth,nMaxHeight)
{
var objParentID =document.getElementByIdx_x_x(nID);
var objImg =objParentID.getElementsByTagName_r("img");
var nImgNewRate =0;
var nImgOldRate =nMaxWidth/nMaxHeight;
for (i=0;i<objImg.length;i++) {
nImgNewRate =objImg[i].offsetWidth/objImg[i].offsetHeight;
if (nImgNewRate >=nImgOldRate) {
objImg[i].style.height =nMaxWidth/nImgNewRate +"px";
objImg[i].style.width =nMaxWidth +"px";
objImg[i].style.marginTop =Math.round((nMaxHeight-nMaxWidth/nImgNewRate)/2) +"px";
}else{
objImg[i].style.width =nMaxHeight*nImgNewRate +"px";
objImg[i].style.height =nMaxHeight +"px";
objImg[i].style.marginLeft =(nMaxWidth-nMaxHeight*nImgNewRate)/2 +"px";
}
}
}
</script>