捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
TsXMl)t&h 关键在于:max-width:780px;以及下面那行。
5F;R~7[j[;Jn [b]固定像素适应:[/b].Lvtq,A[Sy

e l H m&wSx1l 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>  以下是引用片段:p4d-P [Bu?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> T SqS!z"bILVc
<html xmlns="http://www.w3.org/1999/xhtml";>
7pa%I X_ <head> !np%xcZ&W+d
<meta http-equiv="Content-Type" c /> -_f Bx/W"z r)W~
<title>css2.0 VS ie</title>
$\(R;loM0TO%h#e <style type="text/css"> {)X H&LGV O"Ds
<!--
(B/T7S5ChU,z body { (VOY:R)`
font-size: 12px;
&b)Y1N`H]+@ text-align: center;
:L(r&QI!w2rAt0F margin: 0px;
fdY f-J*_;^*~Y8|7u padding: 0px;
L yds$~ } ,DL hB7p
#pic{
)`9F5v)DZkQ.A   margin:0 auto; }1k Iv G F3s\
  width:800px; @b&aL;[!Y6~
  padding:0;
CX6B_9Qv9\J   border:1px solid #333;
V7`-g[/|.dw x   }
vmx(@.EU4Y { #pic img{
m nj Z6@]U_     max-width:780px;
)C!p(Qz2Z-@ width:expression(document.body.clientWidth > 780? "780px": "auto" );
X*\ N4k$w+t1LY border:1px dashed #000;
gGM [7Ts }
_qV~m -->
f\jG1L;b@ </style>
D5v,V4h(M(m? </head> Z4eLm W }1i
<body>
i%m;_p7DH c"nt <div id="pic">
8zh*Z/p/T.]ny0I!}p <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]>
vps;e0g!m"h'y </div> %I9XFh%B-k4wL;lY
</body>
y6V9f C"LAyS </html>
$mu*QP P5e@
b!G#HU.hgK 百分比适应:
,ESx(J vb| 以下是引用片段::JZL5Y?UqNZP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> _y DH F5t3R
<html xmlns="http://www.w3.org/1999/xhtml";> 0ih,}^mo O+A:D0w
<head> @]2G-{j%HbJ{8q
<meta http-equiv="Content-Type" c />
gDG8f5{k5a0K <title>css2.0 VS ie</title> f0}"A s!@BGM
<style type="text/css">
Nv"fbB H8QL'^ <!-- 6xb o8O$D$}l
body { %q1`)P*U%UFb#MWb
font-size: 12px; hb7y)Me J |qwY
text-align: center;
uQg3|s-h:j+u margin: 0px;
3Y#k"U*`#x\6X7p padding: 0px;
f ay!~u4p:Dv9Pg3az&Y }
Ng0x)B8L&h\6a2J #pic{ ]@){5x,fU!WY_
  margin:0 auto;
#a'ADZ}dNB   width:800px; 8^F9L1f*bik#V
  padding:0;
/QYYj$z xm   border:1px solid #333; 8CmH2n A
  } L;jAVo'T`
#pic img{
H8Rg'|6Y.f9kW8h     max-width:780px; `I.~d5Z`&?qE"t
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
P`,i;| f4o D border:1px dashed #000; `Pv7ICV,}r
} bD PaKF5M
--> hU g_1[R8pFO%_
</style>
K r6i{,t-v </head>
0`EmV-x8b+fK v <body> C^.N\3S.O
<div id="pic"> :Y+Z_UB*yQ6_9E
<img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> 0v"^'k} a:|-R
</div>
S@\2gxx#_W </body>
:N%GT/t/TTN$` </html>

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


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