|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。/ \9 G6 z5 k: q+ Q
关键在于：max-width:780px;以及下面那行。
0 I6 p. f( r7 K2 F$ s固定像素适应:
) F% j8 G/ e, U- `9 v+ B- b {) C
) G4 k% a, y" j8 y4 g4 Sdotted; 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> 以下是引用片段：( t7 g4 u, ]1 q& B8 y- _' y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. G% [ Q* X6 x9 T: j<html xmlns="http://www.w3.org/1999/xhtml";>
& u# ^. D0 Y m4 b9 g<head>
& s; b4 ]6 E; C2 f; z<meta http-equiv="Content-Type" c />
. l. \$ {3 k1 ~1 j( ?, {! I% i<title>css2.0 VS ie</title>
) S+ ]* u% s; [4 g+ ^' K0 t4 B<style type="text/css"> 9 Q# Q9 F1 Q; [! h) J& n# R9 H! O
<!--
+ P9 \3 a- k4 j- Q+ _8 ebody {
8 B4 s+ H5 ~* R# k* a) ofont-size: 12px;
9 v3 x) e4 P, M' Dtext-align: center; ; @& c: j: T3 v7 j- }9 u
margin: 0px; : p( Z; Z* i: t8 }( v
padding: 0px;
/ k x) H) l& P1 g2 u6 q7 l: n}
( ^" v2 i) s1 }1 [- W$ |& \: X' z#pic{ 7 V: K0 p$ M% _3 s6 M# J* z. }1 s0 k
margin:0 auto; # |, x& l0 R3 u
width:800px; 3 F9 D! u$ _; }9 _- ^
padding:0;
; t+ l, z# C0 d: j: V6 c border:1px solid #333;
" o6 o1 I5 |1 h- J2 n+ T }
4 w+ A2 h( m/ f" ^; R( m#pic img{ , i/ M& k1 Y, F
max-width:780px; & ?% n! L+ Q: S! ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 P c% x/ P4 L" Oborder:1px dashed #000;
0 @; |! \1 ~& K}
5 G" L i! G2 n2 C: e9 \ v' u-->
7 q' h: D, U Q7 a# y</style> + {1 O8 M. O a9 y/ O% X
</head>
# J6 I6 w+ [; d7 n<body>
3 _ f6 Z% j/ s<div id="pic"> $ T. [6 }- V$ T; m+ T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; z" E$ W. ~- [& r) D0 H0 M</div> 0 Y3 ?- q2 W6 j+ N; i x! f
</body> - k3 h$ K/ q+ o" @, M
</html>
$ U: H" B0 y$ |# z1 _' h! r6 G' f' q2 R6 g6 ~$ c8 ]- \
百分比适应:
; \6 c( j# L: \0 l. S, X/ F9 a以下是引用片段：1 C$ e: U4 `5 X, y" b" W* v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 H' b' F1 f& B9 M% {- l/ h/ t% c<html xmlns="http://www.w3.org/1999/xhtml";>
' \. [* z K- ~$ t( o6 u, G<head> $ {- j8 I' H& `
<meta http-equiv="Content-Type" c /> 5 x% B r7 `9 v3 [! D
<title>css2.0 VS ie</title>
: T5 H3 p$ @! \1 j<style type="text/css"> 3 l- g) w3 Q1 K F. w+ A' ]9 j F
<!-- " d/ y0 {' n2 N. }1 S
body {
, R# C* e5 W( l) d6 _! G* Vfont-size: 12px; - t& N* C5 n1 ~
text-align: center; ' \/ B9 M& O( |& C
margin: 0px; 1 V8 c7 n' S6 R" h7 |
padding: 0px;
) {7 L. w$ t6 T+ k) ?} - Z4 `# J" j8 H" K$ J
#pic{
7 a: V8 e$ _9 X- q" a8 R1 C8 r margin:0 auto;
2 U. ~5 I5 Q; y! @ width:800px;
: K6 I1 ^+ k$ z padding:0;
$ w3 E# m4 J4 c, d8 E border:1px solid #333;
3 L# V w: `7 s3 I$ P }
4 ^1 R5 F) q5 ]" P; [7 l# G5 X& M#pic img{ 8 ?) e% f5 t# q& {
max-width:780px;
; A' d+ H; r3 y" H" w. z* Nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ @3 P- j2 @. \7 i% \2 lborder:1px dashed #000;
1 f* l! F, j9 @% z} $ ~! m: L: H; N: ?# h
--> & _: r( b }2 T- b2 I" M
</style>
' _0 } G) Z$ |2 T</head>
$ ~7 {+ v/ j% d0 ] h0 X( S% G<body>
0 K# U0 ^0 r& D<div id="pic"> ( l, T0 x3 { A, W* e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + v ]' g5 I: B3 Q* I9 z% E( D w
</div> ) ~. R; d* g. K8 w
</body> $ Y2 N) x8 j( w a. G! D
</html> |
|
发表于 2007-12-8 14:55
| 