捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
R,s'g2Wsm1FmMz 关键在于:max-width:780px;以及下面那行。
:f%x'a\6I2D'Mv/}O [b]固定像素适应:[/b]
"w8Boe3E\K u+c[}Jk9X1C5g
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>  以下是引用片段: V@0^E@e6@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
RI/@(Rree @ <html xmlns="http://www.w3.org/1999/xhtml";>
qE#U@ eP8r} <head> T*[P.yg%J:jxhE#M
<meta http-equiv="Content-Type" c /> 9J:hHI:|(d&}
<title>css2.0 VS ie</title>
3Dep,hz!| <style type="text/css"> #x]"C~@l:S
<!--
o5`(G1`*z!b"NJKu*t body {
W$_;k Ku-a font-size: 12px; %L7T/E2e'dB#_0d#q
text-align: center; 0G2?L.AI tc9s.R
margin: 0px; Fa&~6i+aQ Vb5z?2{
padding: 0px; F:H(pm~N
} }9U(yg Y5yw$`
#pic{
{ uk^}h0m;w   margin:0 auto; e{9m ]%GK
  width:800px; I{NV3@y/H,@
  padding:0; *W;sfd3ywm+o5Y
  border:1px solid #333; Ac"TXGof
  } 0\ fy,W u4I;y
#pic img{ {2R*N,cFv
    max-width:780px;
r@vK m width:expression(document.body.clientWidth > 780? "780px": "auto" ); -gxk g(PSKJ
border:1px dashed #000; p n.QPX/p*v p
}
Mo;`/cS1Rs4C$EK -->
:Ph s P7e1o5O </style> $~,l+h2V:oW:n z3\
</head>
UJ kr2r)T <body>
~6t2ov2J;Of4R <div id="pic"> $P&? @L5@9F;r0r%NB y
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
6\L7g/k| ]'f </div> Gyq ?fH j/o.nv
</body> E*I(qb|lU)X
</html> #WNY8L"FC O8T

RHA)k&[1i-~ 百分比适应:
&R+Dqlt,{Q1F^n N/H 以下是引用片段:J _?BX'uH}j#f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6p:i.xAkX'l <html xmlns="http://www.w3.org/1999/xhtml";> )D x(PA8j8s#o
<head> /CU M:} t$A? gG
<meta http-equiv="Content-Type" c />
9Uvw(z1s \|3]^-j <title>css2.0 VS ie</title> w |2a)YjV
<style type="text/css">
O }'O5F(|/h <!-- 5p$i$l:{1P3l|
body { 'Xu+[p4E;z
font-size: 12px; #x e!d.i jf7O/w$vDj:B
text-align: center; x+M:Q&YM*D1|Fs
margin: 0px;
]4KE+z@!K,r padding: 0px;
7R ?+yw%g/a R }
Z2MOXzD4x #pic{ Sz4uB4cY
  margin:0 auto; 2I%r6L,KGV-na/e G-Q
  width:800px;
,E-ab0l f5J   padding:0;
VC1w x$L5I0XLW   border:1px solid #333; B;Pmcw&\
  }
]6^ \_,_e!Qa,^ x~g #pic img{
!ayQ os3Y7H*\     max-width:780px; $cP&a'x9xq7fp:iU
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
#jdJ3h'G/X{l3n W/e border:1px dashed #000;
G)}H(mJ ZC(yP }
G _&xEf wZ'p |"Z -->
/i^Ik4Jyv#wu </style> WY^7A N{S
</head> [z5Cc0a:Lrv,f5`
<body>
H d%Yl{ w+F.l <div id="pic">
JhIUc:a!t3m,v4J <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> )YyA2kH8J FLt3m
</div>
5t [0ZD8X </body> 3f+x'y kHi;q l6FJ
</html>

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


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