DIV下图片自适应大小的方法

div下图片自适应解决方法1

作者：remain　时间： 2006-03-21　文档类型：原创　来自：蓝色理想

第 1 页 div下图片自适应解决方法
第 2 页 CSS中expression使用简介

我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的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">  </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">  </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.

//图片自适应大小并绝对居中对齐
//函数 fImgageAuto
//能在同一个ID下对单独图片进行自适应外框大小
//Ver 2.1 最后更新07/08/27 by Amilim
function fImageAuto(nID,nMaxWidth,nMaxHeight)
{
   var objParentID =document.getElementById(nID);
   var objImg =objParentID.getElementsByTagName("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>