捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。kL:KDmj R hPB
关键在于:max-width:780px;以及下面那行。TZ,w&f9MEf
[b]固定像素适应:[/b]%Eu?W7m,sc^

|*FA!E0^F'P 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>  以下是引用片段:6pLNY qS-C%v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> (?&Pn*\2rg
<html xmlns="http://www.w3.org/1999/xhtml";>
T(i~8Kh9rH;N <head> Cw5{ G$p9s[8vJ
<meta http-equiv="Content-Type" c />
0bbwcU;P$],n <title>css2.0 VS ie</title>
Q4Y KN C]3YF <style type="text/css">
B(~~8z*s'H8gc <!--
5T hq.Aq.j{)b body { J-Qh@K P"Ki
font-size: 12px;
[ BxCXu text-align: center; +R,Xv*BH|.A5K_C
margin: 0px;
.[$rF#P:ob6Q padding: 0px; -F6Y:cU1F EU
}
!Q5a4DT?/Y #pic{
)r$C*n|&d!a   margin:0 auto; .]v;lwMi c H
  width:800px; 'G/H9yRL
  padding:0; dd8m+th|%i ~+E#r%LM
  border:1px solid #333;
5~},D4RZ}6zd(? }+t   }
#o+A#O)O wr$IH%f~$s@ #pic img{ 4aC+J|p+Pg4d
    max-width:780px; r~h5_4Ec
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1s xj Fvc H nR border:1px dashed #000; 5K0V8\)W Nb[
}
&^xkt8`5n7R -->
/n xx RdX b </style>
L2Yapx^9Y? </head>
/F(e.be$|q*u <body>
}J @?0A2Q'KO <div id="pic"> iJl0RP @o
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> X igIa4mz [
</div>
0R&Dm$mgul </body>
Dt3Z ^-d0Xh </html> E^U qR6xM3t)]$`

dc&G j ?5a8n| 百分比适应:k @V f\ r N
以下是引用片段:
!_B;_"^"dG2W L:j <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
vd7`{'pz.D <html xmlns="http://www.w3.org/1999/xhtml";> G0Mf]m RJI
<head> tWM;fL)A'A%o(p/e5j
<meta http-equiv="Content-Type" c />
_|;m4LI\Q{*N'S5n <title>css2.0 VS ie</title>
0C:w ATD0?_^} J <style type="text/css">
!wJ:O S}+l#e4J#a <!-- Csjw.s:k6e#J,h
body {
j,S,K7{d8q^ k u font-size: 12px;
p"fU5y$N text-align: center;
3F~Z2D}2}:q@0y margin: 0px; P#Y'f)b9D$M
padding: 0px; dc/F)c0E:ff`6]
}
jUw J5V(mm #pic{ K2j Qt"t5k
  margin:0 auto; 3SV9Cwn7Rh_
  width:800px; _kL Uc
  padding:0;
9^`D(U1l K Nq T   border:1px solid #333; g$O1r Y0Q%m%E*{
  }
1k v+q]+o[Q cZ #pic img{ +W%r"H;K#DK D.fc
    max-width:780px;
:I`%P_4kw#zz$^/e width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); LF-uepQf
border:1px dashed #000;
a A$dA1Ci-s } Oy#u1z/aQ2u C
-->
%B0~9{ rJfpLs+{ZVjv </style> D'cAI[%m
</head> (STN/H S^(t?4a
<body>
/dpQL ]sV <div id="pic"> i'|Rq^6I)O ~
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
B&BKjo5|1pFVPH </div> Hfs e7_T&X
</body> t4koR#E.Jk!fV
</html>

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


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