|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14403
- 金币
- 2487
- 威望
- 1647
- 贡献
- 1435
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: s6 J1 q! d) H I
关键在于：max-width:780px;以及下面那行。
& R4 |# Q# Z* g) `固定像素适应:
" |% K+ e0 @2 Z% J9 L/ V6 [5 U( j; o
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> 以下是引用片段：% _8 v9 P& [0 i( F0 p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; h: R4 M& r/ r
<html xmlns="http://www.w3.org/1999/xhtml";> 3 E; b4 C; {; l% H. i8 A
<head> . T: p- _. E! j+ t, @" k1 Y( l
<meta http-equiv="Content-Type" c />
0 f: f" i1 p1 F, q1 \: B# E<title>css2.0 VS ie</title> + A+ K& U9 `0 `6 |
<style type="text/css"> $ r* J& H6 \, R
<!--
9 o3 G' l: j' ~2 i$ b! ubody { * N: o7 O; E8 _; S5 \5 L
font-size: 12px;
6 G8 k+ `3 w( ` Q Ltext-align: center; 1 \9 Z2 L; M! x4 U! ^
margin: 0px;
! ]; h# N. S4 \1 o0 d9 |padding: 0px; . V/ u$ x3 [$ f1 K
} ; N; C s0 b9 Z3 @
#pic{
y$ f- N7 t! H1 M3 O9 L4 w margin:0 auto; 6 j u( y2 @0 a) l
width:800px; 1 n$ [' q0 U9 d8 Q# z" I+ ?
padding:0; / a$ u# r: e, b }8 T8 I
border:1px solid #333;
L- G- S) {4 J } : x5 ]6 t: l- T5 l
#pic img{
/ ?& C, [1 X7 W% \ n/ F max-width:780px;
, D7 r9 F J K: h5 Y% kwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); - I* r c7 N* v2 P/ ?' `" O' Z* Z
border:1px dashed #000; , }1 H3 n$ }; F5 A7 \9 r2 X+ W& T4 \
}
( Z( m L# N, K2 _' v, C--> . y4 U4 x# x2 V& ^4 `! X8 w
</style>
; \; d% e: q+ C! G& g</head>
1 B) L1 b8 T1 A9 z# [<body> 0 r- C( A r( l9 C0 O
<div id="pic">
0 `6 {9 _+ D1 L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 b) m8 ]: w+ g</div> $ r' J4 D6 h( W- Q5 }- i$ R
</body>
% s- J7 o$ N. i) }$ W3 {4 U% I</html>
# ?* ?. O9 p" Z- ?% k+ |) G+ {: z6 C/ l7 p5 J% X$ \0 {% \& _' c
百分比适应:$ ~) L; Q7 s- J% M* ?; q
以下是引用片段：
% l; Z- z: Y" R8 g/ M5 `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 V3 Y% F4 n2 A, r0 y* S& Q5 P
<html xmlns="http://www.w3.org/1999/xhtml";> f% a2 A+ x1 D8 `* L7 d7 ?3 A) ^5 v
<head> & k+ a6 ? {: _7 g% m0 x8 X
<meta http-equiv="Content-Type" c />
. L" n% k- C# L# q, ~<title>css2.0 VS ie</title> $ C _7 R; W' [3 w8 @* [5 l4 o; s
<style type="text/css"> " K* y' a" k& s9 B @
<!--
1 T3 k* j+ C; \# H; I; i0 Lbody { 9 I, J% a, A* X5 k/ ?! r3 V/ i
font-size: 12px;
9 |7 h, u: M, a7 u5 _5 E* Ltext-align: center;
- P& z' z, a+ ?( _margin: 0px;
7 I, b) S8 X3 s+ h7 dpadding: 0px; ( D" k) W2 Z3 V8 J4 y, Y
} & A$ s! A0 `; ^' f! M
#pic{
1 n! U, ~; c5 N+ b8 C* p8 \ margin:0 auto;
6 r; J ]# z8 @6 J width:800px; ' Z9 j' V$ C/ T' s
padding:0;
7 Q1 J: d+ u" x4 S( R @5 z4 K( n border:1px solid #333; % T6 b+ `+ x* c1 Z- _; `& {0 R
}
* a; C# t$ h0 e _) N#pic img{
; W, b! m5 L5 g' O/ I. L2 k max-width:780px; 2 ^& @- F' J( }8 T4 s) p Z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ; N" W+ f) C+ Z/ p' T
border:1px dashed #000; ) @! W% O2 C& v6 Z. x7 b
} 8 ]- b; g6 }% m# a
-->
+ `1 U* x4 {- E, N- ?; F$ _</style>
0 S6 y, H; q5 C</head> 1 g$ ]; I% r8 {1 {6 p% p) i
<body>
! f a! ]9 T" g" \<div id="pic">
R% i) r4 K( G, C7 `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 q' A+ u1 x8 \
</div> 4 H( B* `0 I: b. T* T
</body> , K7 `( ^" B, |. B
</html> |
|
发表于 2007-12-8 14:55
| 