捌玖网络工作室's Archiver

admin 发表于 2007-12-8 14:55

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 R.f0iLz p8Os
关键在于:max-width:780px;以及下面那行。
;h!Q` eKzy*E t [b]固定像素适应:[/b]
{6k Z0MGP fm$o
b l;W.z y 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>  以下是引用片段:
1Y B.u i`^c <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
*dh:B5EQN <html xmlns="http://www.w3.org/1999/xhtml";>
~(\+D8wD c2SY <head> r&\0GR&N/P(@
<meta http-equiv="Content-Type" c /> ;l-wh'[ Vo*?iA
<title>css2.0 VS ie</title>
2H8n"d]Z7J(V JM <style type="text/css">
8E0Q R;dk$w.mi~ <!-- 1V W.I*ec^
body { q7RT&VN#z
font-size: 12px; sIySuq(l
text-align: center;
_5`:lAW margin: 0px; V)I:x$~-y
padding: 0px; Mf-o'FmR j%d!N
} Z}8iu b`7|
#pic{ |q(?b:?VurUR
  margin:0 auto;
\3Q%s)?`   width:800px; ,pcQL b,i
  padding:0;
v6N~ ? NoX,Od2Y   border:1px solid #333;
Jh}(Dz2a%?]w   }
d [5z/x| g _ #pic img{
*S!v6w\1SP     max-width:780px; /WR zd/ga3i
width:expression(document.body.clientWidth > 780? "780px": "auto" );
c#C {7H1?H border:1px dashed #000;
rb2W \(q\1\7d }
_{dy8?T r --> 5FJ9E}+l EGc4F
</style>
;LT(n7x-\?0xy\ i"] </head> +O(C S3Ne
<body> ~9HL,w&qy0u3@v
<div id="pic">
5ot/D*?4}4Ln <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> ,Q {\b p o ms9S
</div>
:a^Wo:N Y{&\8Z </body> JI x|cc-QR8t ^
</html>
F.TApy%T/BV5]o0M P ~:fCWZ*e
百分比适应:3q"TKp v
以下是引用片段:
hq&f,P-} QU7R(}Y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> '`'a"_8m)~YN
<html xmlns="http://www.w3.org/1999/xhtml";>
?nF&|${R <head>
k&QVD T9\;p <meta http-equiv="Content-Type" c /> 4@/Y\b O
<title>css2.0 VS ie</title>
%aeX,v8Lcz~v+^ <style type="text/css"> i?.xDN
<!--
!`6zD-D7j7?ot0G'{ body { *yGe;U"D+^ k
font-size: 12px; vP1B mRj1G
text-align: center; J"n#jt'm9r.Ai
margin: 0px; zS[a f'H#BA
padding: 0px;
p]7\joY ^ |L*t }
i @'DH N,x O:z$k #pic{
4q i Z p)Le~7] pi   margin:0 auto; ] M;r9g+t:~.^%L
  width:800px;
!{Q!ru'TU%r   padding:0; Su sE2b5f}
  border:1px solid #333;
ms$S%q/{2jF   }
cc"gH}by8Lv #pic img{
~ZYro#EK     max-width:780px;
Dh|l Z/O}h+zT"HI width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 7G|'QgE;{!U \6f
border:1px dashed #000; ;eU}2v&DOs;g
} *rX'iNr ?w)P
-->
:w6RC3_;v ~{ </style> ,uq#q#z"V9~Hqda+z
</head>
dT9Wi'B D+y7Z <body> o3V3[5E,Qm.n
<div id="pic">
.J"e0Ok;u6N#YP%]%[ <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> o @)s Or.Mn a C
</div>
GR?zLY3Zl&Q_ </body> z-O*t9Jr}&k'f)EG]
</html>

页: [1]
【捌玖网络】已经运行:


Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.