在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。关键在于：max-width:780px;以及下面那行。
[b]固定像素适应:[/b]
u+c [} Jk9X1C5g
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> 以下是引用片段： V@0^E@e6@
<!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> T*[P.yg%J:j xhE#M
<meta http-equiv="Content-Type" c /> 9J:h HI:|(d&}
<title>css2.0 VS ie</title>
<style type="text/css"> #x]"C~@l:S
<!--
body {
font-size: 12px; %L7T/E2e'dB#_0d#q
text-align: center; 0G2?L.AI tc9s.R
margin: 0px; F a&~6i+aQ Vb5z?2{
padding: 0px; F:H(p m~N
} }9U(yg Y5yw$`
#pic{
margin:0 auto; e{9m ]%GK
width:800px; I{NV3@ y/H,@
padding:0; *W;s fd3ywm+o5Y
border:1px solid #333; Ac"TXGof
} 0\ fy,W u4I;y
#pic img{ {2R*N,c F v
max-width:780px;
width:expression(document.body.clientWidth > 780? "780px": "auto" ); -gxk g(PSK J
border:1px dashed #000; p n.QPX/p*v p
}
-->
</style> $~,l+h2V:oW:n z3\
</head>
<body>
<div id="pic"> $P&? @L5@9F;r0r%N B y
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
</div> Gy q ?fH j/o.nv
</body> E*I(qb|lU)X
</html> #WNY8L"FC O8T
百分比适应:
以下是引用片段：J _?B X'uH}j#f
<!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";> )D x(PA8j8s#o
<head> /CU M:} t$A? g G
<meta http-equiv="Content-Type" c />
<title>css2.0 VS ie</title> w |2a)YjV
<style type="text/css">
<!-- 5p$i$l:{1P3l|
body { 'X u+[p4E;z
font-size: 12px; #x e!d.i jf7O/w$vDj:B
text-align: center; x+M:Q&Y M*D1|F s
margin: 0px;
padding: 0px;
}
#pic{ Sz4uB4cY
margin:0 auto; 2I%r6L,KGV-na/e G-Q
width:800px;
padding:0;
border:1px solid #333; B;Pmcw&\
}
#pic img{
max-width:780px; $c P&a'x9x q7fp:i U
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
border:1px dashed #000;
}
-->
</style> WY^7A N {S
</head> [ z5C c0a:L rv,f5`
<body>
<div id="pic">
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> )YyA2k H8J FLt3m
</div>
</body> 3f+x'y kHi;q l6F J
</html>
页:
[1]