|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14327
- 金币
- 2449
- 威望
- 1647
- 贡献
- 1397
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 j7 x1 n$ {1 v0 _
关键在于：max-width:780px;以及下面那行。! p9 G8 Q& e4 F0 h) I
固定像素适应:
K+ p4 r, f6 p- z* q6 r
% z6 J4 I$ b5 g0 T2 wdotted; 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> 以下是引用片段：& @# b' }% M3 F, s; S- b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! H) N+ ?& M$ H) k
<html xmlns="http://www.w3.org/1999/xhtml";>
( f, X; n! Y/ v" [/ e5 X<head> - I2 z- {% O9 {/ G% f+ R7 c
<meta http-equiv="Content-Type" c /> : S6 f+ s6 i; a9 o& g n4 f* l m2 H
<title>css2.0 VS ie</title> ) s! ?2 ^! [: l& m, F
<style type="text/css">
$ ~4 ^) S6 ^% \<!--
: Y- [& M) a' E" Z$ J0 Z( n9 ~4 Abody {
8 F2 g; \1 K& Qfont-size: 12px; ( E, }; s% C X" t+ u
text-align: center;
7 L3 g- E) `( I; x/ Qmargin: 0px; + H/ i4 I5 ?; L8 X$ T( l) d8 [
padding: 0px;
. F4 D* x/ |* c}
6 f+ j5 E+ |! `#pic{ ) h/ q( E2 l$ A2 `
margin:0 auto;
, e% I% |( `" z% l8 p, X width:800px; ! c6 r( d6 ]2 X* L5 z
padding:0; 4 t4 C) W" i$ |' O4 q; ~
border:1px solid #333;
0 \. s& F+ _# u# z } & v% O( }0 n& J
#pic img{ " c8 e8 [2 K" @; _( |" [( L8 U# l! R) b
max-width:780px; ! S4 I* `7 ?$ K$ l1 k
width:expression(document.body.clientWidth > 780? "780px": "auto" ); {: m& E' t! S
border:1px dashed #000;
* g3 j% W7 r( h8 i X} 5 w: z$ f% j* Y4 D" H+ I
--> 5 G% W- O1 m' Y0 }, q4 I& I
</style> : j1 Z- x5 J2 H R2 I. h) L
</head> ' o, |" c9 ~, ~8 i2 d% j+ M) d
<body>
3 s, Q; t) _8 t4 y# f5 z: n<div id="pic"> + K/ a+ \4 j- K6 {. O9 y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) P& {& Z! j) e+ w
</div>
4 R! _5 ^, ?. p</body>
3 B0 e- @# J$ k8 T( j</html>
& \$ A" J, I6 ~/ @, }; f5 c/ o2 G1 d- D Q' u& P4 s( w
百分比适应:
# s3 _! ~' C+ { ]以下是引用片段：+ B0 d* D; N* _5 M7 m( o6 t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, ~2 t; c9 L f8 f9 L<html xmlns="http://www.w3.org/1999/xhtml";> - E& v! }+ l3 X" z
<head> 4 ~1 F) Z) H$ u: W* r
<meta http-equiv="Content-Type" c /> 4 R4 k" z" M3 n9 l
<title>css2.0 VS ie</title>
5 D" b, @9 ?+ x8 E; h<style type="text/css">
* e4 }& M9 ?: E: h<!-- ( ?8 p' j9 v$ {& I4 R
body { # X& m, X2 y& s& y
font-size: 12px;
/ V. w. x4 |* Wtext-align: center;
2 Q, N/ b; [% m3 u. ?margin: 0px; * X! V" i: L! Z" R/ L4 ^# p# V0 Y
padding: 0px;
2 T1 h' f0 E7 m, @4 h} . o4 E i; V7 M' W& \9 o2 V
#pic{
5 h+ m6 p7 Q9 U' J4 W4 U margin:0 auto;
) r9 j! ~" W$ y% S( |* Y, P* z width:800px; ! r7 t2 k7 U! `1 h
padding:0; # y5 n; t4 S$ |- R8 {7 n+ Y
border:1px solid #333; 0 g9 [5 t. d) x
} 3 O. t8 R" e( K! _' O9 \( q
#pic img{ , H: b: a Z1 Q1 t) B) V
max-width:780px;
8 U' C0 ~5 P" R& Y5 o2 b9 swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); / I* S& v! H4 u
border:1px dashed #000;
% i) s* l( ^/ Z1 O$ q2 l# B* g} ; Z& n. ]" P# @+ J" H& p, t+ Y
-->
1 Q( q& p' u6 |4 I" \+ ?</style> & U$ h) \5 \8 |( J
</head>
* V! d8 ]6 r8 c<body>
2 X8 J8 C+ i: C/ [0 Z) u<div id="pic"> ; a- J1 ]# I* F
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % G0 r' o' o' U# K* a! s7 a
</div> $ _$ M4 k3 J$ } K/ ?
</body> 5 U* T2 p, l4 [1 O x$ i
</html> |
|
发表于 2007-12-8 14:55
| 