捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。.] \ J!?I2t.B
关键在于:max-width:780px;以及下面那行。O7xH!s"ki
[b]固定像素适应:[/b] e ^r"](W@ KV

Jb_&m+O^B,s)@ 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>  以下是引用片段:-Q:Y7DE Wx Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
X!A+E5^W <html xmlns="http://www.w3.org/1999/xhtml";>
#Xw;Lpca/q/FC <head> 5R f)RA"z$J.F,q&P
<meta http-equiv="Content-Type" c />
n|)Y&\p Jc}{ u <title>css2.0 VS ie</title>
8j[,kZ%jz <style type="text/css"> X8@vP x
<!--
/Z(E+{zrETw body { J'b#p;e'd
font-size: 12px;
bj%I1t6@ Q'W4Ul text-align: center;
+XPg5qSr4CL"_C'[l margin: 0px; ZBc7w4}.t
padding: 0px; 6y)l!T'] m.N@XpiF
}
K&| q;ve:aZ #pic{ "w'XzKzL[+\
  margin:0 auto; /r!rR'o Fdn
  width:800px; n woRif CS#[ U
  padding:0; !o+~;f4fOi&zv1?.f
  border:1px solid #333;
@]R cef#k)A s   } Pm H5h;iSpo
#pic img{ K,h?!\8ma8nd
    max-width:780px; @o`U!MD+Nv(z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
NK6c:d U5I-m border:1px dashed #000;
*B+o O&|(w`|SF }
:m ]m+ay$d0f A2L`#cG --> B\ gF,S^[({
</style> 2uzU6lKR$J
</head>
#s'Trr2k cKb2eS <body>
t,a6pIYc@5O#E.w)n#w <div id="pic">
+Sj%Y2Uqma!~1t4\ <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
o%}dICO-e XL^ </div>
&UTc:u.HE m)l;^ </body>
'\V[mO ?7h zsZ1E]X </html> Y/VxXy,g g7^m5D

t9g^ Tc}9X 百分比适应:
(TZm)\|wL` 以下是引用片段:/@7VvR`g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> r/P u1Z4Y C#B#x
<html xmlns="http://www.w3.org/1999/xhtml";> 4A:k ?'s*{\&z
<head> W2X0KI$?M
<meta http-equiv="Content-Type" c />
l;_%\lT^ <title>css2.0 VS ie</title>
#Y&lef)V <style type="text/css"> 3{wE3Q{7{
<!-- Fe3s v'F
body {
,c6e zi(N} font-size: 12px; /L h0~zi:F7} ?g g
text-align: center;
?(u1]*E)g/q\L J margin: 0px;
O OnN1[;K*AQb padding: 0px;
P6Q,v/XI0c } M |2[i9xE%|j^
#pic{ [(~yhg*} Y1Kgy
  margin:0 auto;
X/WT1t,iMF9} S   width:800px;
6cN:V9U8W'Tfl0D%ux   padding:0; ;et"~\RR
  border:1px solid #333; H$W U'uPTy.j
  } !FP!oPP"J g
#pic img{
#]5\ Z2A:N-I     max-width:780px; NC-q?(O M4s2f
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/\G r6N B\j border:1px dashed #000; )j:?4Z-Ic QP5?$Wo~
} ES"SIn!b+w2Dh
-->
Tu N Xk nl </style>
,dQ7}r%o P!{4V </head> L1a7d7z,X3G;_v
<body> *K-N)gpZ;Ui
<div id="pic"> &ox3v0D#FG#X
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> M ] t g C t)N1Tc
</div>
y&A1J] _0B </body> np/F1h(k7Dx
</html>

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


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