|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& o4 ^/ k( h. a/ b: S$ l9 l* R关键在于：max-width:780px;以及下面那行。; I; _) s" l W
固定像素适应:0 R, l" l, d- Z; M
% i: y/ O% l2 J) L# t0 hdotted; 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> 以下是引用片段：# _3 t+ |6 H. D; a) w1 p8 Z# e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * K9 E o$ o% l) t6 l
<html xmlns="http://www.w3.org/1999/xhtml";>
8 ?6 h0 ~9 i) c<head> ) h7 L3 J3 q p3 e
<meta http-equiv="Content-Type" c /> ) q3 [ v* z' i& W! ^
<title>css2.0 VS ie</title>
' Y. w" B4 L- h) I) J<style type="text/css">
( {7 y- q; s' c# }+ P+ X5 e<!--
6 O8 |5 ]+ ^1 ~0 `1 m" U6 _4 Vbody {
8 V7 v5 F% ]7 O, tfont-size: 12px;
$ U ^- Y9 b* G) d" l1 ]: l( ctext-align: center; - a8 B! ? j+ w j0 c
margin: 0px;
. N8 V! h# w0 f) T+ ]/ Y- vpadding: 0px; ! Z& S+ q7 x# {; q" @
}
5 `8 T: a* K d. l7 } F#pic{ 8 b, X4 m: r# i
margin:0 auto;
3 ]% c. v% W, G" s7 P4 @# Z2 A width:800px;
$ d9 q; R" i; ~: n; f* s padding:0; / _7 h" I% S2 t+ f! Y2 n" I
border:1px solid #333;
7 K+ Q2 x) m9 \+ `4 C& } } ' K9 M: D# p: |6 ]2 O
#pic img{
6 O* C2 K% |& y" M! r, Y max-width:780px;
5 A; y( Q2 e3 S5 B- i9 r9 F: Lwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
d! N; j' l9 J! Bborder:1px dashed #000; 3 L$ ]8 T$ H; K( P$ m* E. V' K& n
}
/ K, C @% n" P. U--> 6 {- w& u9 T+ t. b- V+ Z
</style>
2 w: \, o# X& f& _5 u# @</head>
+ J# d3 b) I. s' c2 X<body> # ]4 k; n7 J( ^
<div id="pic"> 9 b9 w5 U' ~( ?! J. o! c$ m
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 ]5 [* `4 ]' O+ o9 `</div> ( S' G9 ^7 r( E& ^; o3 U
</body> / }4 P2 P: k+ _
</html> # | S/ T/ p1 W2 X! o
- b8 r6 H! b! F& @' r) }
百分比适应:" T6 V' j* f* P8 {* ~4 c6 W
以下是引用片段：
% ^) Z' h# _: A& Z3 }* \3 P+ k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 ^: w" H1 q& w' C
<html xmlns="http://www.w3.org/1999/xhtml";>
6 B- y6 Q. W# j2 y0 r3 {2 s<head> 2 k0 I* B" [5 s+ @
<meta http-equiv="Content-Type" c /> ) y% s3 j% `0 ]4 \
<title>css2.0 VS ie</title>
6 G1 t" D/ o3 y* @7 g3 h<style type="text/css">
4 j8 r& c# ^5 g @$ ]: |- m<!--
/ S7 q0 `" J9 a9 u1 Bbody {
' ]/ n5 o9 H2 bfont-size: 12px; + a* ~* q8 @' b. Q
text-align: center; # K3 k' r& i% e# m2 _* n; `
margin: 0px; % ~3 h7 B4 `, W' V
padding: 0px;
) u: v2 i) D6 _0 f, }} * U" ^7 j6 [/ [' y! d
#pic{ 1 q. z- d6 s; n% k, D
margin:0 auto; 4 k; C G' U; r0 b1 S
width:800px; ' T8 y: Q8 P4 P3 O* t: [
padding:0; # G- N+ @) X+ S K# L4 ]' Y
border:1px solid #333;
3 W! O0 a9 ^6 c# c+ r* s' O3 ]- X } : B6 i/ Q6 f: L) G* Z
#pic img{
, M( D- L/ F4 F6 L8 X |5 m% \ max-width:780px;
8 s7 o) m, r9 m+ d, [width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 4 H) J( G/ ~+ B' f# a# _
border:1px dashed #000; , B- H1 w q6 v: ?9 y
}
1 h. E* l* z7 G, r$ ^+ E0 H3 |' B7 W-->
6 X5 D, M/ D0 X, i) Q</style>
& W: e6 U# P" }! v8 M</head> % }0 O) D& f6 O0 d, e! |! W4 i6 ]
<body>
! @8 q1 \: \" q6 o" u<div id="pic">
* a5 R" U* z- e, q; ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 Y1 }7 n8 P, S8 ]+ O) ~
</div> $ d8 e0 q2 i$ h5 g
</body>
8 V/ t7 _: ~$ x2 z* V1 y</html> |
|
发表于 2007-12-8 14:55
| 