捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
}5H]&R:n @^ 关键在于:max-width:780px;以及下面那行。K}~g4mF/S{)Mp
[b]固定像素适应:[/b]
t(C8B7q#y9?2f1c R w7Z"VKe-e:P
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>  以下是引用片段:fp+{Na
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> C,{5bY5fB&N3D
<html xmlns="http://www.w3.org/1999/xhtml";>
j]#i:g,?'n7C8B^I <head> `Dwt,},w.b
<meta http-equiv="Content-Type" c /> _;` PtD
<title>css2.0 VS ie</title>
j5r*T H8H9I;a <style type="text/css"> W5kpZJH6tJt
<!--
f6WO w"Pi body { ,@&sB&T,T k
font-size: 12px; Jl\ [ l~5]b
text-align: center; 6Eux"ej l)t
margin: 0px; D.R BX.V@8m_
padding: 0px;
I&d ul&w0e3qt } 0d1PQG B-?
#pic{
2O(x9ry:L%g   margin:0 auto; +{ _mT0D i,z3B @
  width:800px; 4Fb GB ?p
  padding:0; /r*M#L^4|%y5U9Z
  border:1px solid #333; 1q;S]q/I"b
  }
I:X1k'd8Kb:e #pic img{
!u{#Hg:X)P     max-width:780px; ~ d1fe3Q W Puq
width:expression(document.body.clientWidth > 780? "780px": "auto" ); #y6HS hd*S'nT
border:1px dashed #000;
9b)i'[.TvD6D)V"r } n{rVe
-->
Lh.\n g#Ut6Ts.} </style> ]K6Ellu^Z Tk!wb5F+i
</head> 3AZ qg ~p/O;V
<body>
_H5o?6DqE0y7dTD <div id="pic"> C:N}'_n
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> fw!Z;a1d"`~a
</div> OZj[:go^H
</body>
&}U%Y1_5oWg </html>
/W:}"Yq2I*\:Jm$qg-X ;Qa.TQmct9yj
百分比适应:
$h4f@ LH]/R 以下是引用片段:Pk0x6?"A9V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> *xs2]?/B
<html xmlns="http://www.w3.org/1999/xhtml";>
Ax;h#nwQ <head> KQ2B0d1VR:j
<meta http-equiv="Content-Type" c /> 6[0o'~ Qfg
<title>css2.0 VS ie</title>
0\iA]uJl <style type="text/css"> I aGN T3i
<!--
c ^5wf;xG/vw body { q_4[ v0Uz
font-size: 12px; 7drBs0b
text-align: center;
4F%k.ha6| margin: 0px; U xQ3F/|.Nm
padding: 0px; d9]Y,cc!t4? o
} ]M3{)cC.W]-i
#pic{ p.{)y @U y b
  margin:0 auto; H'ly8V]!y;BR
  width:800px; L4FDzgp4g$P]E
  padding:0;
6\*A Y4ddE{n$m   border:1px solid #333; {f/N}M _Zue
  }
8\-h:b'O-@ #pic img{
x@dtTI(\     max-width:780px; iAv7U-\
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
;TOfY&m[;f.X*B border:1px dashed #000;
^i n#P*cV/k:q)s }
:xk:NiRdc E_sW| --> *PFZti
</style> 4e9ye F L1w
</head>
R|M0P[5_ <body> tak|/s|L
<div id="pic">
9w2E(k]eW8F.^ <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> ]"G M @W,z
</div>
&\lGr5s0U c j </body>
,Gv+wfK </html>

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


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