捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1L'QZw]J])\!p
关键在于:max-width:780px;以及下面那行。
j,XQ+`:g5Wk:mr| [b]固定像素适应:[/b]
wl0`+q:E4Zp;r md|@ cb+@V!e_
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>  以下是引用片段:T"c`7m/G2H }%j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1KJ!l#V.Z'ZZ9L[ <html xmlns="http://www.w3.org/1999/xhtml";>
q'm*Q uT <head>
6W#aHP([R*Q+c h <meta http-equiv="Content-Type" c />
/k3hz#R [ <title>css2.0 VS ie</title>
qX`.D:p#^s <style type="text/css"> 6NN6SQj;krJ
<!--
e:a9H2}&u7A%n body {
!r/bN?VQ(P~+},D font-size: 12px; ^ P-l+rX.TkL N
text-align: center;
;v(t7Y0S\x2j1t-F g^ margin: 0px;
7kcnc"j0[^ padding: 0px;
9y \0g:YnM }
e.Nr^,bH #pic{ ?6A} @X-H0S
  margin:0 auto; t9Vw5PB
  width:800px;
+M/@x2w5K Y)zI   padding:0;
p T,e"YvSe~   border:1px solid #333;
F8H} u:i&HO   } &H?6s2hBM,h
#pic img{
"x u'?6_ {/{^,nf.J     max-width:780px; ?-C+c2s2u'@W?@1V Z^&y
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9U8rHN(@
border:1px dashed #000;
&}#BV$v i&P } /p s&Y)N:X.^#eO lN E'[
--> "X+L6R HCa3S
</style> 1b(Rb$ub1N&o;P/~A
</head> 9@eOA`o
<body> B"P8h{d)h
<div id="pic"> |Su'n Y ~Wb0a I;x
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
w&i/c;YA w;dp)\,Ae </div> :^ I"E%\"v
</body>
u;B dA:EN P </html>
c EEl~_0b
)ZJ\:?8L 百分比适应:
8n5O$|p'z(AL'H-x 以下是引用片段:
'~o V.u]d`M <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
I#R{ c!g8e7? <html xmlns="http://www.w3.org/1999/xhtml";>
hj#W*QES;xS7f^x <head> -]7FH0E#WF(r1b
<meta http-equiv="Content-Type" c /> /}%H5Iq0dh
<title>css2.0 VS ie</title> .Z K7{ Ty)s#UR
<style type="text/css">
(U4lj'o9X8S0] <!--
+E}QH{:?8J*x4L:_p*mN body { as5D/C6Aw$C
font-size: 12px; .v J X b7Ry:{@6H3^
text-align: center;
U(fcu!] margin: 0px; Y x*?4JM7l
padding: 0px;
LJ9z,C&S0Q|g } (j uT zfBE
#pic{
| IEZB x?(z   margin:0 auto; L$hU)k^7b SO r
  width:800px; &u'}2I4{9w
  padding:0; F2h5S0Ks9nCt c T
  border:1px solid #333;
2mPT)t1},w2y6X   }
ppzD&I |5p #pic img{ m PF` IqD a
    max-width:780px; -yNY3W'S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); -o)w/u:}#x-Dc
border:1px dashed #000;
x2F%gJh.` s je } (P8t.Q{9AfY;J}
-->
nRi ~ X!w2w6ma-H </style>
]X U`tP { </head>
N~hk J)yr&J4u$C%M <body> p7n'g*FLw([!U.c
<div id="pic"> X;ex Sg WN,k D
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
AqMJ!D2Z8z"D*d Z </div> !SzB{r
</body> 5~REjCyJ3K+m
</html>

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


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