捌玖网络工作室's Archiver

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。K.`*d/}!Oh
关键在于:max-width:780px;以及下面那行。t;_P,i,_w"D
[b]固定像素适应:[/b] G,T}0s }m{&t~.{
yH|l rik@H2u
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>  以下是引用片段:/ukv4|S6XQ {(b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> x+DXk#P-O
<html xmlns="http://www.w3.org/1999/xhtml";> /V0D?I(ma
<head>
c4fZ4s)Q0hx <meta http-equiv="Content-Type" c />
r/D*q4}^(Y <title>css2.0 VS ie</title> 5~a @7It W A;F
<style type="text/css">
O3E"xNqe| <!--
.N(L.a&~x d body { h(Y s P"KE2T
font-size: 12px;
Zq7aC7v4ue1W,i text-align: center; #E&y;_k o c
margin: 0px; _{ \S$w
padding: 0px;
2h#\X Y:e;b,K } tA0}j,x&j:H%\|
#pic{
?N~-i(pt \U2j%]PV   margin:0 auto; zS.g6P;S5~9]%["d9J
  width:800px; gfFq%gm?V
  padding:0; !~If@L4?[$pq G+[&u(J
  border:1px solid #333;
Y#aJx WIL   } 0z pB?6@5p
#pic img{ ]9^-e2N$E3p{E
    max-width:780px;
gpWW6g(a width:expression(document.body.clientWidth > 780? "780px": "auto" );
]3J6oYZ border:1px dashed #000;
7Y0p%DW/m1b w } ^.vSm&~u5i
-->
1{&Ff-Iqb| </style>
hd o K rD[8` </head>
P^4s7Q!V R"S <body>
9u\e0Ix S/` <div id="pic">
W9~)at-uwsHeR <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> E| HzC ^*sx-@
</div> 5p4X`sF)tr*Tk ~
</body>
i8[2in$Uh </html>
Y J!K-J0} FM)V ck Fj%D2{ ~UZ
百分比适应:
9G\*E*u-N N*f e 以下是引用片段:
C {vd3_tI"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> b t-C m^ oK
<html xmlns="http://www.w3.org/1999/xhtml";> K@H)B-fwk
<head>
1eU*D{{ A5@ <meta http-equiv="Content-Type" c />
f%e C?Y"l+N-r <title>css2.0 VS ie</title> `H D+EpD/[~2g(a
<style type="text/css"> #a8^+f pS ?/og
<!-- b(McF(o)KTA
body { mn9N"X4q/F^}t|
font-size: 12px; 6r@ ?9hEj5HEjU
text-align: center; A.f2s6OZE-^*`hd
margin: 0px;
? I3| Ae padding: 0px;
Y7OK ]%A-Z0[ }
:CL*}4J d fjt #pic{ u It5Al#y3p m
  margin:0 auto; j%p6\q p)F
  width:800px;
jkIRp8j   padding:0; @&yIC[3T9p\8U
  border:1px solid #333; t9B.A!_7U R|9Xn6hy
  }
1l MY1}%H9G #pic img{
'i"|'|x`3o_qy&s7s2o     max-width:780px;
O{^KA width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
mC;~i(JYXl border:1px dashed #000;
(q)P(tS!I#k } M2m1Za%tH@'wM
--> O4|7?3KXI.n7Xx U
</style>
i kiU Z Sq </head> e q/`2LZ Mq*@
<body>
9}Z-E*P9^z <div id="pic">
dd)aZc <img src=[url=http://webclub.net.cn/images/Beijing2008/logo.gif]http://webclub.net.cn/images/Beijing2008/logo.gif[/url]> W}#~ Q;Wn4O.x3U\/g
</div>
$C F m.S,LWnA\o ` </body>
D%O8C osI&`9[}:K ` </html>

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


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