捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。6pa_3[.q1T4S'Yz
关键在于:max-width:780px;以及下面那行。
b\AN(G&w [b]固定像素适应:[/b]A Toh"[V"}5O

.z}c6wd 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 nw&Sf9v2H8w7Z <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5v!} g%Mum <html xmlns="http://www.w3.org/1999/xhtml";> m*x7iN8L~
<head>
zTG]A+Y,@x <meta http-equiv="Content-Type" c /> C Z{a*l~I L:V;Za
<title>css2.0 VS ie</title>
Q@1Cnh7Tq9L5e <style type="text/css">
_Vm W9Z3?(V <!-- f4^PN?4o?
body { #qz;` |$ifk^#E+Z
font-size: 12px;
|I,W'b1]&P-G r text-align: center; )v8Z L,}d a
margin: 0px; '~/p9p1[/l!TmS`
padding: 0px;
_Pr0JcF+d }
T'}@ m5P U #pic{
nR-w+H2Q\ Nj   margin:0 auto;
&d sWO*NL/c   width:800px; C,L:MQ[
  padding:0;
\w:I:R(J.LB   border:1px solid #333;
D/ux-L1C,mv   }
_{b8Xq;e:r #pic img{ |3{^7r~dc$Z;`
    max-width:780px;
^ kC)Q ?e4I width:expression(document.body.clientWidth > 780? "780px": "auto" ); &fK@&n#fK3t
border:1px dashed #000;
jr6B [%D%`'h5u }
XH"R#G@R{ --> !ZG9X:{2['G/o`2B C'} N
</style>
|2kQ"X)Lj)Ik </head>
1jm7]9~!j#e&l <body>
`3fEcy`ps <div id="pic"> kau Y [$U
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> Ih| \d^1Dhf'?
</div> Hy?5tI
</body>
#Z3s^6Gn Xt]H </html>
;e%A,{Z,M0n5L 2o@&SWSt)b/b|!q
百分比适应:
qwA(k-B'Tt` 以下是引用片段:dQL:o.z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3tXEJ[ z-q <html xmlns="http://www.w3.org/1999/xhtml";> }m9QgPA
<head>
c.P9M ig*_/B <meta http-equiv="Content-Type" c />
] mDPC;}-Y <title>css2.0 VS ie</title>
,h)ar G }(Q(SPh#M <style type="text/css"> t'_#}r-M&td[
<!-- [0DK [hC5`
body {
Y z6O J"U$s.K font-size: 12px; 2F5w{2VDr K#T'p9Z
text-align: center;
8f1T7Pb1J~.p margin: 0px; 'D%\,Mgh6D
padding: 0px;
5P*Oc.\'n }
Oz2pF(rGRl #pic{ R C"R;cNf*F
  margin:0 auto;
:@3w1sqU   width:800px;
#Ir:PJ:P^+tWd   padding:0;
@.YpZ t Mlf   border:1px solid #333;
Fv_RX1x[GXa1h   }
9U1H?m1B$\ #pic img{ 4p:[7c[pUt
    max-width:780px; Q_}5P i%e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
GX5l;J,Sn border:1px dashed #000; &J2UPFWCb
}
JoAe1Q -->
0K t7G,yYi dO)R)pF </style> hp5WS,]3y~%Y@
</head> X C0P&])I!{)_0GQ
<body>
i!AWG2LO <div id="pic">
u,m'oyk!Y)H <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> 4\z?l1i
</div> 'C/oCA&Xpm'n(c)c
</body>
;|U9``P;r&a </html>

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


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