在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/W3hP+v%e关键在于：max-width:780px;以及下面那行。m9yZ KEE:G/`0K!a
[b]固定像素适应:[/b]
U4|&e/|0f;e.cp
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> 以下是引用片段：f kT n |c|
<!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";> ,M7sr |f
<head> x'w`2v"bU ]
<meta http-equiv="Content-Type" c /> )j;w0V!R \)jJ)g"L
<title>css2.0 VS ie</title> Cs PUP#Z$N6v
<style type="text/css">
<!-- +?w];I.Cg
body {
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
} g(A-d)Lb-U:E,db} m
#pic{
margin:0 auto;
width:800px; *h I&tQ g-D
padding:0;
border:1px solid #333; 8{ [p gP9x.c$A-oS
} yX0t7F `/Px N0`"q"P
#pic img{
max-width:780px; %S1A~X x"_/w\
width:expression(document.body.clientWidth > 780? "780px": "auto" );
border:1px dashed #000; *cx2z&n5Ss? s3Cev p
} 'M N V X EW2?
-->
</style>
</head>
<body> $Bs+_ R5YN
<div id="pic">
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> :eU%n}(P(QWn
</div>
</body> AC0x-]i6|0j }.s`
</html> R2m1r6a+r%E(z
~x"`O6v edW mu:[
百分比适应:N Z?/C+e
以下是引用片段：6p-yG'Z K-t,S%b3^
<!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> K3x/~A E
<meta http-equiv="Content-Type" c /> F/@sz }(\
<title>css2.0 VS ie</title> v7Y(gq!]O {?"{
<style type="text/css">
<!--
body { _4L&i)G `5nn
font-size: 12px;
text-align: center; 4RK'J#wE0e
margin: 0px;
padding: 0px;
}
#pic{ .l-v'a[.z6gT;f9^
margin:0 auto;
width:800px; wU p)V.A0yI
padding:0;
border:1px solid #333;
} 3D#X@+z U \
#pic img{ vv*_ m P `#B
max-width:780px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
border:1px dashed #000;
} *Jo o6? G$E\'`'x+z p
--> #M2N6Y7pv{2da
</style> pKp~-er s
</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]> a]#M8@ EY
</div>
</body>
</html>
页:
[1]