|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14327
- 金币
- 2449
- 威望
- 1647
- 贡献
- 1397
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' O3 X i4 {! v8 ~% O关键在于：max-width:780px;以及下面那行。
$ b# |9 W" @9 E. v! c: q固定像素适应:
, l% A% L; I7 C. o# ]# a* |6 Z
$ W6 K( E* y' n" g) X6 i4 d$ 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> 以下是引用片段：
; l8 |3 Z. f. g4 a* D5 q v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ D. Q. B! ]: L, |' G& w<html xmlns="http://www.w3.org/1999/xhtml";>
8 _( `6 X! g7 ?4 }<head>
& ~1 W8 F0 h: l<meta http-equiv="Content-Type" c />
. |7 U2 i$ j& n& C* U<title>css2.0 VS ie</title> , S0 ~( X) M N' m7 h, Q) Y
<style type="text/css"> " H8 M, F: F* s; C( ]9 U8 J
<!-- 4 F M5 y! Z5 P( d' F. H; R4 {9 S
body {
. i- U! ^( e* s8 i Y, b/ S1 ^font-size: 12px;
2 m q$ Q. ?7 G6 o2 Btext-align: center; % p5 L& H' W5 E' E+ R
margin: 0px; * u& ]8 U% }- A! c1 Z) M
padding: 0px; , @' Q1 i" i3 o" o4 f
}
, O) O( E+ I* f- }5 J#pic{ o$ x$ r3 b+ G. b: [# X
margin:0 auto;
2 W/ m F: G. Y width:800px;
8 j* K" Q) M P- N$ l padding:0;
' e) |; _, R. ~3 Q3 t border:1px solid #333;
& Y4 v- d! u4 H/ S! e$ h7 Q } ; \# j9 T+ Q1 S( g" D
#pic img{
0 V. w+ D" T* q u max-width:780px;
/ y9 h! a1 N: ?# a- Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 g" `+ ~, } S# t, p# {border:1px dashed #000; ; G" P7 Z, [4 W, M
} 3 @- @ B( w3 A* F4 i8 ]1 D, W* ^" V
-->
( E2 q& Q: z' R3 i0 c2 k( m8 B</style> 7 _7 r3 I& r, o) d2 B6 b
</head>
, z" _5 I: C% \, O<body>
& H0 s3 ]" B+ L! F- E1 w. `<div id="pic"> ! \" a# D0 c5 j8 _, a) K; P
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! e5 x# B9 d8 U& V</div>
) b% z% U- x+ L& n* o" B</body> : t9 E" M) ? L0 L
</html>
. D) s! n- e4 P2 K3 y. c) l/ m& q
百分比适应:
+ R( c, E- r6 {5 m2 {8 G7 \0 J# R以下是引用片段：4 y. q6 N- i# Q# s% c; X" s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 M/ j* L9 R; k2 F<html xmlns="http://www.w3.org/1999/xhtml";> . ?! m4 I7 T1 N9 l
<head>
& {" @# n& f2 f! j% A<meta http-equiv="Content-Type" c />
/ z) U6 z, L) x. `; j2 |+ @+ y<title>css2.0 VS ie</title> - N( s3 H \, {1 N1 u7 G
<style type="text/css"> 5 C( w4 E. L: e' F y- {9 W% w
<!-- / W0 b; d% h) r
body { ' L. V# m% a. T5 r: H8 ?- t
font-size: 12px; ( @( u+ L! l e8 l
text-align: center; " _% O6 V2 J: X: c1 J, k3 Q
margin: 0px; 2 B4 a: H, O9 _
padding: 0px; 8 t2 x/ X2 c7 k @5 T
}
+ d! ^1 s& E* j" `: ?0 D0 \#pic{ ( |7 t9 f' R* e! W9 r
margin:0 auto;
: ~! P& _' T+ @ width:800px;
7 A" w& a! I }+ M; h padding:0;
/ ?% S+ `/ L B: q( b3 q# M( r8 Y) s border:1px solid #333; % F q. H9 p4 R$ M2 s3 B. A! S
} T' {' x- S5 a( v% k8 W7 X9 v
#pic img{ ' ?5 n: U" u, w6 y* p+ a G& k; h
max-width:780px;
8 Z) m, y$ v, \& J0 hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 W. m$ ]$ ~5 S" S& M9 ^
border:1px dashed #000;
: d2 W- b/ y. ~: }; g3 C! m}
( i& G0 M- ~ q--> 7 ? r/ A# g3 ?- G
</style> , A0 E4 n Y# j. y! w' F
</head> 4 f: [/ H8 i4 d1 n# f
<body> ~8 B9 b$ c: D) V
<div id="pic">
; P7 e3 M$ D7 q) ^6 p2 I, O2 I0 ~4 f( k<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ d6 }) ^4 I J9 p% A7 j</div> ! q- K0 W; U: A, `7 |
</body> ; X) I" }; F& T5 E0 v7 c \0 @/ s( x
</html> |
|
发表于 2007-12-8 14:55
| 