捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0v`'A)_/o'qVb
关键在于:max-width:780px;以及下面那行。~5Rb8DE)C(yy1p
[b]固定像素适应:[/b]
cU d"~_O C +nry$[ cOkv
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>  以下是引用片段:TE%r V1iu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
No#~ b0[? <html xmlns="http://www.w3.org/1999/xhtml";>
k8[9cn~+S <head>
+Xj r&WGO <meta http-equiv="Content-Type" c />
%o:dH"d a){m-L <title>css2.0 VS ie</title>
b X3Q Pu8Bd#B <style type="text/css"> .H9w'oC'F&y#qL3L
<!-- 9}"nptz2cSB
body {
*@m/~N?^ font-size: 12px;
4['L,rc_ \7h text-align: center;
$[:|S;@,J ]N9s-A margin: 0px;
[)s?n1B ~ padding: 0px;
J} \@1m#Ei7e }
*om+U[G F #pic{ t#c-y;}r y)@ v9D
  margin:0 auto;
Nm{:^W5R)\   width:800px;
a6{ O$NvY2p@   padding:0; )f:}+p(p|C7@
  border:1px solid #333;
^ex&O)kUV7m1f   } 3m'P }p([-nd
#pic img{
V7Y5Z/M,Q,u     max-width:780px; 5R'?rpZ8v ?1L|~!`
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3`mRf^O:P-H"}^
border:1px dashed #000; 5DM9S:U$Yp._-yv
}
5G U.Uc3J4RVgq] -->
5m;x3DL#pe$B </style>
]6C!F9{F </head>
w)l6?W$e <body>
%| R2GC'@z&aCD <div id="pic"> &u V6{ ^},[-iv1eg
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
$] B^e7qH:s:h </div> 9H-dv3I6W,G(v v
</body>
*Lm/H0L$N O3Gk.Y1m </html>
%W/N y9JVbf m*?w? r9s:\
百分比适应:"Nl{v5q@
以下是引用片段:jC+@ b*gC2\y B?y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
_w@!yW|*^;r <html xmlns="http://www.w3.org/1999/xhtml";> @jz(b__vEs
<head> Pw Hb v W;l
<meta http-equiv="Content-Type" c />
B|8Q4rxzo4w)A;N f <title>css2.0 VS ie</title>
we KE+}3\X <style type="text/css"> f0VLn}*P
<!-- \0dOL2ax
body {
Xa9Wx~M font-size: 12px;
x8k/fE3l)ws text-align: center;
u@#g$[Q|U margin: 0px; |@IT bH
padding: 0px; MP/d ^v.vFD W
}
SmG$j7t5Ep #pic{
#t6C tyR0}   margin:0 auto;
K.w4I@&L8g`I\   width:800px; N/y_O,}ox!l+i
  padding:0; WWG1A3}!xl,_
  border:1px solid #333; T5Zr\fQ,[L;?.q
  }
IUK s R F #pic img{
\$C M_u0aFjb2m     max-width:780px;
]1r { ds width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
)u+}2VY4AL border:1px dashed #000; H7G V1c!H"Z
}
&m1o1GSs1y -->
)K#e*Oeu#T-r </style> 0yev6a[#c3Y
</head>
9GU\ ]&r5eoDM <body> D\M6FemX
<div id="pic">
tL XrY"u@0P <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> y yCe&~P
</div> ~,D!] |+A5Xh%sv R
</body>
zOK6nF ` </html>

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


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