捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3BoF&D@e,a 关键在于:max-width:780px;以及下面那行。
4Ln[u%Y j"M Dq [b]固定像素适应:[/b]
:A?9K{!Wa 2lF'O(j a
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>  以下是引用片段:
%pM_E8uk om^ ['ywX <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> @#dhmJhF
<html xmlns="http://www.w3.org/1999/xhtml";> 0|n5s![$a9e EC g3Ru
<head>
-Umy"F(f%l8o$^$o <meta http-equiv="Content-Type" c /> w]N5D V3E\6Ru4L
<title>css2.0 VS ie</title>
{6Z;O(f.o3m <style type="text/css"> 6h/ZjE"e3i|8Pd
<!--
w)r Pn&iR body { etjqu ?&K
font-size: 12px;
UC*cS:p text-align: center;
`5^zl]yQna(D+EMbv margin: 0px;
d/Ow8j*Vk#_ padding: 0px; Iq @QIz
} @ P_-]5_XB
#pic{ S(`c qBI
  margin:0 auto; ~VG9f? F}:M-K F
  width:800px; "~9mS9v)`K;~
  padding:0;
(ac @/|-['O-\   border:1px solid #333;
x aj5~A8k)s   }
z/N s/D/\qqp #pic img{
#`~ K LI h?}'O     max-width:780px;
(z/`"`6o8D#C;YF width:expression(document.body.clientWidth > 780? "780px": "auto" ); %iB*d ^ wGy
border:1px dashed #000; B K:]8uzN6g
} grZ{2N+Fn"D
--> SU$cd&tLz)j
</style>
(H T+A3vyDT-t1L4X </head>
6R OOr|6H#L <body>
(L2Q _S!ia)v <div id="pic"> T[R(wxSdg ?0P X;Jg
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
B(tPD#^m </div> c"OAI,c+t$LUi RX/Z4^
</body> Xbw N5dG
</html> X)o(n;b P*k0Z

N$_oT}\ 百分比适应:
){.~8|8~0dn 以下是引用片段:IEi!P2jI3Mzi`1J%~ W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
I ^2dT$[&I <html xmlns="http://www.w3.org/1999/xhtml";>
c%t(My3rl <head> ~:~q2WlJ
<meta http-equiv="Content-Type" c /> -Jf(N"O l{,E&ci
<title>css2.0 VS ie</title>
!J$t+? D2i^M <style type="text/css"> }0hS+u(Q Jc
<!--
|,W,d2E"m/C$H body { t0YU%L(qu$@9OKF$L Q
font-size: 12px;
(R7|U PSK;AB3] text-align: center;
3VF9|'s q+A margin: 0px;
X2o4S%R?2\? padding: 0px; 0qs xU6}5p#PeQ
} 8i#P~B/U"S~
#pic{ bo~#J*z+u{8|
  margin:0 auto; 9}Hf8m'R!|-E0S:g
  width:800px; y8I,sU1Pk!J7e5wS n
  padding:0;
7\1`'z,V.H4O A   border:1px solid #333; :s8d\p-_d#y[l
  } F!iz0z2R Q*Q9WRK
#pic img{ %|9U`6n e$[ H!Z
    max-width:780px; $B%Y l]3Iz'u,R
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2`$A&mW ^/{TRu
border:1px dashed #000;
.P#tm(\L)L2g-| } zu {(aOh/H7~;jZ
--> z/LD~!Ec)Rm
</style>
J7Ry:v3`"s1[ </head> )HQ\f$T\-Db9U+{
<body>
Ng9r5YpO!Y <div id="pic">
1B aOz"~ <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> 2hD.u/Kge:y4O
</div> ee@{sk^
</body>
} xS6{ a </html>

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


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