在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。关键在于：max-width:780px;以及下面那行。#])@;yQ,c IT @6P
[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> 以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> B v"_H.?+i
<html xmlns="http://www.w3.org/1999/xhtml";>
<head> /M"Q~&Nk@J
<meta http-equiv="Content-Type" c /> :|-n5l3Sd.B x
<title>css2.0 VS ie</title>
<style type="text/css"> ,Ps/] _u!oA Dk R
<!-- A'JkY e$a/U\
body {
font-size: 12px; gz(}1j f'z[
text-align: center;
margin: 0px; HZ]Z4@t}RY
padding: 0px;
}
#pic{
margin:0 auto;
width:800px; h~;H2cNr!m
padding:0; )p7i t i,L&WG2N
border:1px solid #333;
} #VJR~nei0v \&U
#pic img{ ]R$B E!X$\-J W
max-width:780px; ;?5F6xk7@q9dK
width:expression(document.body.clientWidth > 780? "780px": "auto" ); +hVm NF(S nK ^
border:1px dashed #000;
}
--> Y _t0?.@ mV b,o&}
</style> V$N D+Ip6i*x
</head> 1EQl9W Wy
<body> $N"A_ hl8c
<div id="pic"> n MkW.a6I
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
</div>
</body> j5qx$B&R,nG
</html>
$YW z1D [|~J
百分比适应: fZ#NOUy{^
以下是引用片段：
<!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 /> 1{^0G%l*u ]#F ?
<title>css2.0 VS ie</title>
<style type="text/css"> t(Y._1gS C)G
<!--
body { Q0[G |ow/}!R c:A
font-size: 12px;
text-align: center; ({A+Yq`.ZAx4c
margin: 0px; k h@.BVF
padding: 0px;
} *mx*dX7A;?:pk
#pic{ 4G(E/IC4N0Wnbwg
margin:0 auto;
width:800px; #l1X4ku%G-J n A%H"{
padding:0; "[6R4g r*v0o*g?q
border:1px solid #333;
}
#pic img{ O k t Wo(A f'fx9\}
max-width:780px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
border:1px dashed #000;
} W0]y L^,t0Ta
--> 5K&p:c~XA'@
</style>
</head>
<body> H.T.A~MC9F
<div id="pic"> #d$@:J$X)x!Nq7M
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
</div>
</body> -Kx'b9q7Z/N Ut
</html>
页:
[1]