捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
MR_^}&Iz t^ 关键在于:max-width:780px;以及下面那行。 N:j0X$h&R&L
[b]固定像素适应:[/b]4g EC] E5e I hyb_;Q
-z;i?S&w"o j)x
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>  以下是引用片段:
Y]}K-lC,{2O"e a <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6_)h"R%I2v|*GRa
<html xmlns="http://www.w3.org/1999/xhtml";> xKwj.Kq%hZ
<head> XU0ac:?#RW
<meta http-equiv="Content-Type" c />
9}BU*O4T'f2p*YF <title>css2.0 VS ie</title>
X g L\-Tn9{MF <style type="text/css">
/qZ+}.}gN6]k2SX1] <!-- (GY ` ~"w&J r3J
body { E-`Lh-o JsQ.I
font-size: 12px; t [OEP(F
text-align: center;
%U6AW$X(Wd2eTJW margin: 0px; f` O a"NW ` X)g9p|R
padding: 0px; (d[!Eb"ua?F|"lb
} f]-pjM&E0rR!q
#pic{ $O;FcHp n
  margin:0 auto;
xN]#L`r.U   width:800px; {i&p,TW!hUJ
  padding:0; ^I}"V$P/}V0O
  border:1px solid #333;
Tf-i&mh'e4z   }
J,mU%W|:ZF #pic img{
bJ v$d.L H;?}a J     max-width:780px;
+V#l,NZ:T0p0to width:expression(document.body.clientWidth > 780? "780px": "auto" );
]3i&t&nka6v*F border:1px dashed #000;
\h)y Oi1gL } D8D?8Y&K x,V @3D
-->
6f-e5]b/h9} </style> |Q w f;q;XrD%G
</head>
.cP'q5V|$um x*[~ V <body> Z%D5o-xL;k Z
<div id="pic"> 3]Q%yW?N%T
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> @A$Ft]\%x;OU.|
</div>
lMUO8j9I F7T}sqg </body> Bi:i?*YN{\+k
</html>
&RC8?u.^,t7D hgg\C |7s qfk
百分比适应:
a Lb2a0m,k7uSf 以下是引用片段:
'UV$CB(U*J <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> MK^!^6p)awbr%N[
<html xmlns="http://www.w3.org/1999/xhtml";>
u~'Dr{T/f pN Y <head> wjfj:d9S;@
<meta http-equiv="Content-Type" c />
'H5i:BY+Hk <title>css2.0 VS ie</title>
w lO5j3N;B4D7m` <style type="text/css"> )lp+Z[Q/KiT pA
<!-- %e(J'g^pB%Q
body { 7Vve6KrZB7Tn
font-size: 12px;
a_1K;F,G$C.g9?!_ text-align: center;
A0Umw QW9@ u%K margin: 0px;
$GyL }? Vv padding: 0px; |u2e mm5~SR
}
^a-~3Pn)} #pic{ ;o9b4_ iu#vW
  margin:0 auto;
2P9?5c6|Cq Ckk   width:800px;
f"hh2L7lGlRZV   padding:0; 4c-w+D:{k1X/d|
  border:1px solid #333;
ZY/e9[!Nj'w'Sx   }
9z%@i|"_r #pic img{ b+SS~F6t{ Z g
    max-width:780px;
$Xp;H,nk*xp width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
zG NIR tE+tdP,m border:1px dashed #000;
a.]'a)Tg;R4l? }
O9X x.`$U9c --> 'UM,W8LB
</style> IK4X L n^3^y#s
</head> {tLrhZW
<body> G w&O"[;t.h@Y#o e
<div id="pic"> $opz5Jut
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> *f7E1a0e%Y.k
</div> `t r%Uv5N4X
</body>
E$i2O[ d4a$t </html>

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


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