捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。zlfp(o5J
关键在于:max-width:780px;以及下面那行。
WRiZ Br ztf [b]固定像素适应:[/b]
$i5Qo,F"DR.N I:uI
F7Jam1c.br:n%V 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>  以下是引用片段:9j"S}dJ*{\2g-Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> k b C2`8Pyk*P)^-l KP
<html xmlns="http://www.w3.org/1999/xhtml";>
[#?`Nkb}%\? <head>
;r;q*v5T-A Xcs%Y <meta http-equiv="Content-Type" c />
2Dm$@ J2YV.j;C <title>css2.0 VS ie</title> 9G3P*y/vYj8}f
<style type="text/css"> 8N4n)n]%N0{#Pl
<!--
Z)C6e,hq2a O1p body { -g dQ~7xe
font-size: 12px; w3bv[*ZE
text-align: center; !g.G3r`S:`-uoL
margin: 0px;
?s0v&Y'ZI_ x padding: 0px; 7t!KK#V*g/h~pV
} z;C }M+b o`N0r
#pic{
7S"}%z&H Bwn2mE"C   margin:0 auto;
0~0q3`td%p4d)O6Y   width:800px; w)]&v_VA
  padding:0; $~*g,y%x(p zzF THi
  border:1px solid #333;
\JF5k0H%k   } B&rvhn*ks_Z@7u q
#pic img{ "[f*k"Z{)e6{R
    max-width:780px; L1x*O7t]T`n'cF
width:expression(document.body.clientWidth > 780? "780px": "auto" ); V!i:e+\3JqV I
border:1px dashed #000; 6B"A3a$^ o'|
}
8D0n a-{;D(U(] -->
#|'t^#Q}5n']/K9C </style>
-c(M@oHC*f s </head> R)sv S|
<body> *g {IA0B o;` t9T
<div id="pic"> 1c.GRbWE!a_
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
pi|)d4hX R </div> w+n$\8q(?_
</body>
,Rbv0s]O </html> %t$r _4cu?#z(d

-V{n'~.YJ*W 百分比适应:
2}5`Z1l[m 以下是引用片段:9fkU4x#| C]%V p7u`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2_L7b+[1J B#[:l }
<html xmlns="http://www.w3.org/1999/xhtml";>
&\vc-p W <head>
v8Fu g\+^O <meta http-equiv="Content-Type" c />
e)~+[rZ%s9d <title>css2.0 VS ie</title> G`H6Q2RUu/gs
<style type="text/css">
tm~]}btYr9g <!--
]k!C$~tF9G body {
,|q)n1Fb font-size: 12px;
1BAUR@#Q P| ] text-align: center; [ q/b`u4D;Y+P](j
margin: 0px;
A+`$Co+_ a1Vz#Z g9Jy,S padding: 0px;
Z,f7[sL6rw(j^!h }
K'X;i,?L #pic{ ]!~C0ayx C]2D
  margin:0 auto;
s8L7`)L0X v   width:800px;
{J:i0`I6|B`6}   padding:0;
,y2uS.a@*Y le   border:1px solid #333; )e|5kG]J`6Zvx
  }
lC*u7WQ0ed\,a #pic img{ !UGdi1z(xlw
    max-width:780px;
TE z1O Ml3p"E width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5{4_jx BCF@ border:1px dashed #000;
)@4\oZ.mr*[ vc } 5NF Y&p^#n
-->
e$O _8Ud)K.j3W </style> "l|%l-b3w:mgw$~
</head>
w.^i9W^P n <body>
qrZ/t}l"k <div id="pic">
N,mx#STk't3Q'a`1O <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
/a"FzjS$R)i^q,g </div>
H6N8]-Ph </body>
\s o!d.FXr{p.Cs </html>

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


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