在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。关键在于：max-width:780px;以及下面那行。 p:@0U(gxv5Dq
[b]固定像素适应:[/b]
,BY(g)g(b/wt
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> 以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> t Jw U-LAN
<html xmlns="http://www.w3.org/1999/xhtml";> )lk mk.D_
<head> @+brN V;g$V
<meta http-equiv="Content-Type" c />
<title>css2.0 VS ie</title>
<style type="text/css"> $nG#w m+e\1h9d
<!-- F0C9f7hb7YK H_3\-\D
body {
font-size: 12px;
text-align: center; 'm;D eKs ]l F2b
margin: 0px; N7s Zr#N+D6N
padding: 0px; S^[i6^ N
}
#pic{ \Yy$Ze(w4U|
margin:0 auto;
width:800px;
padding:0;
border:1px solid #333;
} $b E ?$_ ~ xB G
#pic img{ z0q2I7k+Rg+P
max-width:780px; #j%A T_+q4Eo/W%?
width:expression(document.body.clientWidth > 780? "780px": "auto" ); *F+LOGE"J{
border:1px dashed #000; 2{nW/Xx%\/b)[(C
} X { j7D#?0G-F
--> 'Udl.}5`2xz1x
</style> +?'_/[7CZ
</head> ,A nq m-q z ?1{9R
<body> f*]o4C$| W*_
<div id="pic"> #rg!sI$M(A:SO ^ |
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
</div>
</body> 4R$EJ1Hz w
</html>
eQe5q?,~`#N
百分比适应:"w$i @r@CX
以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> CV)b/w [?0c
<html xmlns="http://www.w3.org/1999/xhtml";> qj"g j|t[8K
<head> T!j pr,a:v;zD%l
<meta http-equiv="Content-Type" c /> "L vC p9Wj7Xt
<title>css2.0 VS ie</title> )E ss!mNPx
<style type="text/css">
<!--
body { CB%? ~ s V {8lj
font-size: 12px;
text-align: center; 3bn ei c)} TY
margin: 0px;
padding: 0px; 7T,C1L0W$Y A:W
}
#pic{ DTD?-S&b
margin:0 auto; ;PO G M |at0hS o.}
width:800px; uU2YV:s(| e
padding:0; go1NU)R[#s.D
border:1px solid #333; %T5{JG^ B
}
#pic img{ JD3u,J&sq
max-width:780px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); KAg,C$s2W k0D
border:1px dashed #000; }:T}{!V xY"H!G
}
-->
</style>
</head> $HM,db"Ylp
<body> )h { H;@2p HS
<div id="pic">
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
</div> Lr_%_^ ]a O
</body> g o&}VOL#d^
</html>
页:
[1]