捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
@-R8F[zuV)~ 关键在于:max-width:780px;以及下面那行。&KP"t"n%{1i
[b]固定像素适应:[/b],VN#]G+v

PB5iO g8O 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>  以下是引用片段:
0W)n9Oi(B0xa <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2tShY#wX!n X~bl
<html xmlns="http://www.w3.org/1999/xhtml";>
?cu:f*a)Dm!O lSN <head> 4|a]6]n~_q
<meta http-equiv="Content-Type" c /> /IlB'wr
<title>css2.0 VS ie</title>
tv4u?@u.Gf <style type="text/css"> eme(Q#z n#Q*{c2fZ
<!-- 7o;tn,Eh
body { }5i2ir)sLEp'm#l U
font-size: 12px; P#Q9J%mX*B~,E
text-align: center; 7@`%Ec;}@F
margin: 0px;
dI7J;V"Y:S padding: 0px; WrI5C2r}D D
}
!v#yny1IOX%p #pic{
#L4k[]HwK)b:m   margin:0 auto;
DG[aY}/` ]/x$`   width:800px; Gq0K@9H0F/M!jp'QR
  padding:0;
|[ d8`o+SE6z   border:1px solid #333; )i:rcvt}
  }
$T}M\2@l [,x #pic img{
f*f@!U"k"gg~9I     max-width:780px; F3wj-p9[
width:expression(document.body.clientWidth > 780? "780px": "auto" ); scMndWC;N7UQ JS
border:1px dashed #000;
*c E7`!g7Jr&j A }
b4Y2|dvQ3I? --> *i:AAy$C%B#L2H
</style>
/Q5K:M7N S/g </head>
n@%x/F;M3f0kyZ <body> ']Ml1F(d4S \ g.~)N
<div id="pic"> u0hyN U,V)wh
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> Cn R4} e R6l
</div>
@T-YT a0{T&R </body> SeiVut
</html> "n6?vz/o2{+o)Dw
%J'eq `p v'I,OdJ
百分比适应:
ncn[ |-R,DZ] 以下是引用片段: S-^0[h F4Cr;Wz:o{6F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0Z#eK4B]8NT:Y3Ue <html xmlns="http://www.w3.org/1999/xhtml";>
.V8J7q0^A5? j.aPZ <head>
CFw\o/L_3\n <meta http-equiv="Content-Type" c /> "U v am$y!V8n)t*^
<title>css2.0 VS ie</title>
E/kcwp l(k <style type="text/css"> B(P\ S4Ho:vMI
<!-- i8r1B!L1X
body { G6P*?8EQ;s O9d
font-size: 12px; ,a l'R.?z0]
text-align: center;
:mQ)yt${p~ margin: 0px;
c1p*gn"|^/g padding: 0px;
0i$HO3c0Q } Hq qb@+_%C+S
#pic{
&axWL l(Oe8i*T   margin:0 auto;
_^$m't&p8TL%Y   width:800px; %JY#U,K0t
  padding:0;
#|a XmP|!?RPo   border:1px solid #333;
U0md:Y.~G dO7[\   }
/sjUT_4Tl6} #pic img{ k:rw4j!` qB3k x
    max-width:780px;
7{|Afc width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
.Q5k[ F,o border:1px dashed #000; Csy Ij#O4L
} z tc5a*}
--> qbB)gJ d
</style>
Hp2c|m2mMM </head> }Q3BVS{*lq+daq
<body>
N%~:W:I!I3wv"z <div id="pic">
.^GtR!~,Xv*E+] <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> Q-ci8WSK8IM
</div>
(n2b#\ y yV </body>
&\8K/F!{&Y"f </html>

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


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