在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。关键在于：max-width:780px;以及下面那行。~~jWhWED I m
[b]固定像素适应:[/b]
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> 以下是引用片段： ~ r kx7f3s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> #Mi J r5A^4a*q'E
<html xmlns="http://www.w3.org/1999/xhtml";>
<head> QA@2Z uiTz(J
<meta http-equiv="Content-Type" c />
<title>css2.0 VS ie</title>
<style type="text/css"> !e6^T6x#U%pwQv'O
<!--
body { %qr;w:Um
font-size: 12px; p.rX@H*E4Y6B
text-align: center;
margin: 0px; rcz'cL _K
padding: 0px;
} 1g.B$WkeM2b$h
#pic{ ~'_ }1i1K%DJv
margin:0 auto;
width:800px;
padding:0; 5j a4r3p(H2d,_Y
border:1px solid #333; 7g y;V.] \T[,t d
} F#P!]W0q;g#^,q
#pic img{ |gp&NB`
max-width:780px; z ]%S4`4[H-} \6N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
border:1px dashed #000;
} 9\pQc'C B%b
-->
</style> 9UQT ?H,X{x
</head> !GoWx }%lW3Ss
<body>
<div id="pic"> 1g x2f'nD LmR`
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> "OR/?E` i s#Iy
</div> \r|$`:?9Q f
</body>
</html>
百分比适应:6Xp'}} v3I
以下是引用片段：
<!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" c />
<title>css2.0 VS ie</title>
<style type="text/css"> 5i9w:b%w{C%H
<!-- .X0f[ dV i)H
body { a l)u'gHg;vQX&`G j
font-size: 12px; ~)? fF} |
text-align: center; G ?"s~f7R
margin: 0px;
padding: 0px; q K&y'x-n
} :Z J _l M'ZI E W
#pic{ &U%Uw_q
margin:0 auto;
width:800px; i%e7jb.H;a+s
padding:0;
border:1px solid #333; y-? w5j:es
}
#pic img{ i B N gqZ X
max-width:780px; 5qE(_0rC-XH P!Ab
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); } l5[4rX3p3\ b
border:1px dashed #000; 3`&l R } \3s3Z g1`
}
--> Tg3M^$m B
</style> J1NE1g f O8e
</head>
<body> |p@`H4xt
<div id="pic"> 5[Njx)y
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> 8?4N [H4o7],b
</div>
</body>
</html>
页:
[1]