在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。.] \ J!?I2t.B关键在于：max-width:780px;以及下面那行。O7x H!s"ki
[b]固定像素适应:[/b] e ^r"](W @ KV
dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段：-Q:Y7DE W x Z
<!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> 5R f)RA"z$J.F,q&P
<meta http-equiv="Content-Type" c />
<title>css2.0 VS ie</title>
<style type="text/css"> X8@vP x
<!--
body { J'b#p;e'd
font-size: 12px;
text-align: center;
margin: 0px; ZBc7w4}.t
padding: 0px; 6y)l!T'] m.N@XpiF
}
#pic{ "w'XzKzL[+\
margin:0 auto; /r!rR'o Fdn
width:800px; n wo R if C S#[ U
padding:0; !o+~;f4f Oi&zv1?.f
border:1px solid #333;
} Pm H5h;iSp o
#pic img{ K,h?!\8ma8nd
max-width:780px; @ o`U!MD+Nv(z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
border:1px dashed #000;
}
--> B\ gF,S^ [({
</style> 2uzU6lKR$J
</head>
<body>
<div id="pic">
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
</div>
</body>
</html> Y/V x Xy,g g7^ m5D
百分比适应:
以下是引用片段：/@7VvR `g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> r/P u1Z4Y C#B#x
<html xmlns="http://www.w3.org/1999/xhtml";> 4A:k ?'s*{\&z
<head> W2X0KI$?M
<meta http-equiv="Content-Type" c />
<title>css2.0 VS ie</title>
<style type="text/css"> 3{wE3Q{7{
<!-- Fe3s v'F
body {
font-size: 12px; /L h0~zi:F7} ?g g
text-align: center;
margin: 0px;
padding: 0px;
} M |2[i9xE%|j^
#pic{ [(~yhg*} Y1Kgy
margin:0 auto;
width:800px;
padding:0; ;et"~\ RR
border:1px solid #333; H$W U'uPTy.j
} !FP!o PP"J g
#pic img{
max-width:780px; NC-q?(O M4s2f
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
border:1px dashed #000; )j:?4Z-I c QP5?$Wo~
} E S"SI n!b+w2Dh
-->
</style>
</head> L1a7d7z,X3G;_v
<body> *K-N)gpZ;Ui
<div id="pic"> &ox3v0D#FG#X
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> M ] t g C t)N1T c
</div>
</body> np/F1h(k7Dx
</html>
页:
[1]