|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14361
- 金币
- 2466
- 威望
- 1647
- 贡献
- 1414
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; e6 p, Y; ]: d: o: l X0 p8 N8 q
关键在于：max-width:780px;以及下面那行。$ X( A3 X. E3 Z0 w! H, t
固定像素适应:
6 |/ ]$ c; V' T# U" E
% h: s5 H: _8 w" adotted; 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> 以下是引用片段：
& J4 W( `3 K5 R# q/ X# F U+ |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" {# k# d$ F9 b& X! |, _5 S2 H<html xmlns="http://www.w3.org/1999/xhtml";>
. i8 K8 P* ~' |( q: W0 `7 I<head>
; N& s5 @; }0 g" _<meta http-equiv="Content-Type" c />
2 `, Q, f- W6 u h7 X: R<title>css2.0 VS ie</title>
1 U2 `+ n' `, l) m<style type="text/css"> # U; J" j8 R+ k9 Z
<!--
1 s) M% y e8 O$ ~* Abody {
6 |2 h4 Q; D$ l5 k0 }. Hfont-size: 12px; 0 t/ E' i2 P% @3 d" d/ o$ ?' a
text-align: center;
" V8 v) o. h6 D. \; ~margin: 0px;
9 v6 N0 N }# A2 f( R9 tpadding: 0px; 7 ^: @, ^. U2 m: |4 w) W9 B
}
5 D* Y4 g7 R7 z+ V, K- n' s4 H#pic{ 9 R- T3 ^: P; }+ t
margin:0 auto;
) \" N* J) d- R8 c width:800px;
c, F) n; }7 [9 n3 S/ D padding:0; 9 b$ D$ ~8 L% c0 B$ M
border:1px solid #333; 9 f' c8 E! b4 H( k
} 9 ^( E. N9 X" h* B1 w0 f; ]7 B
#pic img{ ' q* s4 G7 @! i/ i$ o! r v3 t
max-width:780px; 0 b7 a0 s: e9 ^0 d) e8 g
width:expression(document.body.clientWidth > 780? "780px": "auto" ); & y" o u( ~6 V; Z6 n+ _
border:1px dashed #000; 7 z+ @' d* X- h0 e- Z! B" h
} 3 S1 V8 p& D. h1 b1 s5 V2 r
--> % ^7 z4 P! [$ f: ]( w6 r- z4 Y+ M
</style>
+ U* U3 L" n f- O( x6 ^</head> $ p6 s) _+ y1 i! C" o$ n* Q1 m7 Q
<body>
/ v: |3 Q- w1 ~0 |<div id="pic"> 3 P/ K) ~# i5 L3 w1 ]7 |
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' L2 a" v" S. ^- y) A1 w) J( H& h
</div>
$ m2 y6 q. O' [2 N) T2 A6 W) [! c</body>
# J* U) A# x- F3 z+ O( l3 v</html> 2 y; N% b# \; ^, v! a- A6 c" u5 A
5 v% z3 H0 P: q1 c5 Q# l百分比适应:4 r( M% d$ S- P1 h; a1 n- Q' @
以下是引用片段：
g9 K' W; ]& e) ^7 x4 I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & Y M( o' R( J+ U) t: m( G# k T
<html xmlns="http://www.w3.org/1999/xhtml";>
. `4 Q6 r; ~: j- s+ h! y) y<head>
7 v2 B. T, R" N+ r6 N1 Y8 W<meta http-equiv="Content-Type" c />
( h+ U% |/ _$ v' a1 W7 ^<title>css2.0 VS ie</title>
6 u4 P* |+ z2 t<style type="text/css">
, }3 M2 @$ z! [3 L( W1 W1 ?<!--
; K" a% l* K( |6 \4 r1 d; `+ Sbody {
& g* x) H$ G, @) L+ {" yfont-size: 12px;
, y! z* [/ u4 H0 Q0 i$ a+ K/ k& mtext-align: center; % H+ p0 z( O& o) c8 l) i
margin: 0px; 9 _9 B: L5 N- }1 K
padding: 0px; 1 I, Z. ~8 d- K) u; r, G7 x8 M5 B
}
& I4 |. i `9 Y# I. B#pic{ ( E: e7 v7 A8 `
margin:0 auto; % _/ r# [4 I" c1 \& t
width:800px;
+ `* w7 h B" \( v5 i, D* X- f padding:0;
$ E) e- ?. g/ H& F1 \, s0 E border:1px solid #333;
; {2 ^ T) _% e( ~: A }
! I& V, d/ u2 M- B4 w7 A# k#pic img{
+ d. ?# c& |; x) n2 E/ W max-width:780px; ; \3 w" U* _: ^3 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ j% o& u4 o' \border:1px dashed #000; R$ J6 Y2 a4 R7 B
}
# X* w# C% J/ e--> 5 n" F7 a2 P$ v! w5 R" s4 L* b+ L
</style>
; A( k: `8 Z7 N9 H3 `+ |</head> 9 s& G; |) I$ v' Z+ g7 w
<body>
* \( P9 C: n/ N+ ?: u0 d1 m! T<div id="pic">
! s* w7 y, m* J1 ~$ I<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' s9 }$ k. }6 r</div> % k. s5 E: X: i
</body> / b3 _5 d" l- D: `
</html> |
|
发表于 2007-12-8 14:55
| 