在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。:yV+I&M2y$D关键在于：max-width:780px;以及下面那行。J-?cJ j T9|Q
[b]固定像素适应:[/b]
j]+A K ?*Ny
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";> ^*S.dDF p
<html xmlns="http://www.w3.org/1999/xhtml";>
<head> 0CA m&v%?;C#rtf
<meta http-equiv="Content-Type" c /> $q'lL9o%M!o4i{ ]q
<title>css2.0 VS ie</title>
<style type="text/css"> y b1^&M]t
<!--
body {
font-size: 12px;
text-align: center; &\*?{5c({'JEo+u
margin: 0px; Q9B}#|X
padding: 0px;
}
#pic{
margin:0 auto;
width:800px; 'Vt a(i8H5](GD
padding:0;
border:1px solid #333;
} Gn:Jb ^5C'l
#pic img{
max-width:780px; L$p5Y,X7V lF7n a
width:expression(document.body.clientWidth > 780? "780px": "auto" );
border:1px dashed #000;
} $nvb-q/G!_+@b@
--> ,cWE { }w
</style> C.~oeFgDC(t&f
</head> ;l;H9I!U P
<body> )] i.|8MDH5x+C"]'L3c
<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> 6L ]on3L+I
.`)a kWE
百分比适应:
以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> B6Y0d G9{/Ov%r4N-q
<html xmlns="http://www.w3.org/1999/xhtml";> 7qGr M\Q/_t1AG
<head> rh zrw zM vM#z*u
<meta http-equiv="Content-Type" c /> d? n)D%x O
<title>css2.0 VS ie</title>
<style type="text/css">
<!--
body { ?2~"\-{ V8S
font-size: 12px; $La3|1z6O [4K$UO,Y
text-align: center; x#X p4F N
margin: 0px; Yv'e"Q1[R G8_ Cn_
padding: 0px; ;e6Rsb8}
}
#pic{
margin:0 auto;
width:800px;
padding:0;
border:1px solid #333;
} V*@M Mb#? _
#pic img{ _9u?3V X4d^#]6H5t
max-width:780px; 8W'J7qb1j*`+d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
border:1px dashed #000; nI(R'G?cF
}
--> %X!fcg%wT'P0V7q Z
</style> wy%t7K d+k i(Fj&pH
</head> 0v0a gl s3]~6G
<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> +dD*x%R W:iG;V
</body>
</html>
页:
[1]