div下图片自适应解决方法
作者：remain 来自： 发布时间：06-10-21 浏览次数：24 [
大
中
小]
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。
固定像素适应:
百分比适应:
提醒:
1该方法不只是用于img;
2max-width,max-height,min-width,min-height.
Update:修正版
出处： 经典论坛
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。
固定像素适应:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
width:expression(document.body.clientWidth>780?"780px":"auto");
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="/articleimg/2006/03/3297/koreaad_10020.jpg"alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
width:expression(document.body.clientWidth>780?"780px":"auto");
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="/articleimg/2006/03/3297/koreaad_10020.jpg"alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>
百分比适应:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10?"780px":"auto");
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="/articleimg/2006/03/3297/koreaad_10020.jpg"alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10?"780px":"auto");
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="/articleimg/2006/03/3297/koreaad_10020.jpg"alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>
提醒:
1该方法不只是用于img;
2max-width,max-height,min-width,min-height.
Update:修正版
出处： 经典论坛
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
myimg:expression(οnlοad=function(){
this.style.width=(document.body.clientWidth>780)?"780px":"auto"}
);
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG"alt="感谢blueidea被我盗链图片！"/></div>
</body>
</html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
myimg:expression(οnlοad=function(){
this.style.width=(document.body.clientWidth>780)?"780px":"auto"}
);
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG"alt="感谢blueidea被我盗链图片！"/></div>
</body>
</html>
扫一扫
7615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
