捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。Y HN)c7P[.c$x.PQ&~
关键在于:max-width:780px;以及下面那行。
.q9Js&M5I [b]固定像素适应:[/b]
nc d7Y RV3E 4p2j7i7U"Ph6HI
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>  以下是引用片段:
!^)@7_"by <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
P/I}2h!R~6^ <html xmlns="http://www.w3.org/1999/xhtml";> "iL4Vl+[gI,B
<head>
%|._6M0|g^&L2s <meta http-equiv="Content-Type" c />
A n3ig"m1M+e <title>css2.0 VS ie</title>
;O?4P%_6n8O:G{z <style type="text/css">
c"L#tqzBu%p <!-- M%E0ni9`]B
body { J&OT'H;Y$B
font-size: 12px; +MVY'h!~]#}!C
text-align: center;
)@u8~!L6mO#E margin: 0px;
1M1n{&\,} TYdj padding: 0px; &@,f;Rq+v/v6{8[R
} t#i4]r(KJ8r%G
#pic{
.K R X~NuDn   margin:0 auto; W%qO*w;I0rH
  width:800px;
o NW~'Pg5` V   padding:0; L(Zb z|_;Y7L
  border:1px solid #333;
h@"vle   } Q0p3nQ5L g"tR|
#pic img{
5\4X3?N'N/}vp     max-width:780px; S H+@!Q/Up%F,C!Q@r
width:expression(document.body.clientWidth > 780? "780px": "auto" ); JNvs1ehT{
border:1px dashed #000;
&{7QZKjd B }
Z_.Lx)v+s-w0D --> AK8j9yr,S jY.tz
</style> %^5_ u[vL3ad
</head>
l$Cg]g,hS ag+c#_ <body>
s#`ID S(E0~D <div id="pic">
-h5J#BG:D%AIS;n u <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> S*oMP\.w U
</div>
Rc_(P0{(uNh@ </body>
$\.Q4OFv1\)@ </html> "p n tx%R-Y*s
m-Uz/g0Q!y9?5imFWM#k
百分比适应:
W5h0E`#V&R*F 以下是引用片段:
:l0@-`L-\"[j x@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
dw:NIP@!Ga <html xmlns="http://www.w3.org/1999/xhtml";>
NF R&i,`:O <head>
nY(P a U <meta http-equiv="Content-Type" c />
k{5B4wF2^]5g <title>css2.0 VS ie</title> 5y p.DC_/sf
<style type="text/css">
OE&g"r+O&} <!--
;Z!V Jp1bC+T+a'w7? o body {
,q` pe"md font-size: 12px;
1H:a(u0HR.q&vq text-align: center;
*e^6SxXt}n SZ margin: 0px; 0{UT/xYz
padding: 0px; N0ziJsu+a!o(x
} ?a I&~9Ki:{.~R'Z
#pic{
n9p9Sd7dO/RI^   margin:0 auto;
aG`L.R _CL   width:800px; _A'{n!uB4Q`-Ah.o
  padding:0; ]}8lhk:k ^+m _
  border:1px solid #333; &T!h,yn!D)?_c6c
  }
#QL_^E a]$e9^ #pic img{ g%h.ja9_zP$K b;p
    max-width:780px;
$`y+DH+}2A!I(L4Zh width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 3Nx+H N` R
border:1px dashed #000;
b0@0pymf&~$gKo }
)zxEe/nr6ndKKC1F -->
fr0[?%^1D </style>
,BYz3qZ@ </head>
4Hl*YCw <body>
4_(O/S!Vcp <div id="pic">
$R.g!a6L)uQ(j <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> UqZ }H!B1X
</div> @F3L;@7f
</body> o\{jc4[
</html>

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


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