捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。-R,a/Szg1mDP/l
关键在于:max-width:780px;以及下面那行。
5c,Z G6V3i&y)I3AU$je3l~ [b]固定像素适应:[/b]
S9vP.N+~Rv;` "J3V)B*{ h"_ n
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>  以下是引用片段:
w y)v_"~] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
Bl'Q(w9x~Z <html xmlns="http://www.w3.org/1999/xhtml";> #H8S+D&hi.nY!N,K
<head> Khu!X?oPai2O
<meta http-equiv="Content-Type" c /> 3E ev sr gz
<title>css2.0 VS ie</title> /J+Z:V*tOi;s.a
<style type="text/css">
"L$Y/_(X [~A[ } <!-- 3@l ]8E| r-z%^W
body {
"n7`5e!Isq*l+G font-size: 12px;
TI9F |~e["A"r0L text-align: center;
i5dm4|fz6O margin: 0px; !\,v)C]#wg:LO
padding: 0px;
2Y0|A,M/Ys_*G?;v } M.KJCg1z
#pic{
dZB(w.Q.~   margin:0 auto;
X @.C3Ql   width:800px;
R i H VI {q9Pt T   padding:0; ^ Os0I$P!t9_ YS:[I
  border:1px solid #333; h:K{g)z@#V%y
  }
8jH O0iH1?&n #pic img{
W+M GDpVe+}$z     max-width:780px;
K\1Z;P [1B4Q7` width:expression(document.body.clientWidth > 780? "780px": "auto" );
*L-Q dq Bmewd border:1px dashed #000;
LKI!}$[ C } (X9btJ{lQ
--> I7id:|9cd
</style>
4R0? x%p}0@:v3fGO J </head> S#UJxQr:?&u_us
<body>
i"g1K%P3c N'wM)K K <div id="pic"> 'xn B(?+~
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> C$zw/V3Zw!jr
</div>
d0y*i'v5m3T0m </body> `L7lc"L#ZW0?
</html> u$`};`*k%d!Zj t4k

Ai*^d7Z)t&Us8I 百分比适应:+v` l L@Q
以下是引用片段:_7V v9?;A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
U*J:{4v WsS&\ <html xmlns="http://www.w3.org/1999/xhtml";>
$| S\ ma.U*i <head>
h4i;j3QH <meta http-equiv="Content-Type" c /> @6{hrmu P
<title>css2.0 VS ie</title> q)i|7O$C*X&Dfd^
<style type="text/css"> _{&L*M*l6hbB
<!--
z \g_no body {
@2`e[Eg(a"RV font-size: 12px; 5Lm8F9`!a U0r
text-align: center; ,N\[:T'M.W`%c d-I
margin: 0px; hMQ~$Z2K
padding: 0px;
0mja/r xr&IT2d }
F1L$Fygg Zb #pic{
)| q&S x,}HgPH   margin:0 auto;
?z,Ne5j [6O   width:800px; A4e`[C
  padding:0;
lM!i1t~   border:1px solid #333;
1`+GoP.hz   } 0VBq WuL
#pic img{ Hx0E;B'A:j3T
    max-width:780px; Q9Tq9j^ FS c!c-y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); s,Pf/EIWJ
border:1px dashed #000;
b:E/^K.w C FLpK5O } lco8k3L4k
--> o'SF#Fv? d
</style>
/Y C2f0[0Le,OB </head>
s].O9@^U0ViA <body> ~}W G]k.v
<div id="pic">
M&XG:m/rPYk#l <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> -Orj/n c
</div> J@m%|3B o
</body> g \'o+C;NN%hao%}0c
</html>

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


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