|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" ?5 W/ D- S1 g2 M( U3 M关键在于：max-width:780px;以及下面那行。
# E! R% o' f/ j2 B; e6 @固定像素适应:
0 ~* D& ^% u4 z6 t6 Q d+ [4 h! G# u0 y/ b7 Y2 g( U2 V
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> 以下是引用片段：3 ?- U! m, e' M6 R3 b% r) s. q. o8 g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' E8 c3 ]2 Y+ B+ H" d8 I# d<html xmlns="http://www.w3.org/1999/xhtml";> ' G/ B3 j& E$ \0 s/ g
<head> & P0 _3 a5 t* E' s
<meta http-equiv="Content-Type" c /> 1 @8 M3 j$ y! a" N, {. y7 J
<title>css2.0 VS ie</title>
% J/ P, H4 S* H0 A/ H: p6 y<style type="text/css"> 1 K' e7 }2 W* v0 X9 i
<!--
! |+ b8 U& F; Z7 O# d3 zbody {
+ q9 p1 r- n P9 ?8 Dfont-size: 12px;
/ ~7 z* o8 Q5 m1 Vtext-align: center; ! i' N7 E, _1 k& O8 k
margin: 0px;
* Z2 ?6 h$ _6 o& A4 z( G: z% [7 Xpadding: 0px;
5 M; M$ ~2 t% W- j! r/ f8 b}
2 c- w. m3 _# _$ \! s#pic{
& @) @* q7 d! y# B& [ margin:0 auto;
0 h1 x6 A1 B( { X' y: E width:800px; / o, u0 ]) `! A7 T/ A3 n! v
padding:0;
7 V% t" X9 W! y( W border:1px solid #333; & T6 r; B& V1 Z
}
! h* i5 U, a8 z$ e/ p- y7 y#pic img{
; Q+ @& a: z; h+ b8 ]; q1 E w, Z$ { max-width:780px; . {" o! N8 Q, D4 y T5 ^
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 D8 S# F# k1 nborder:1px dashed #000;
" J) p A1 l/ V7 K) E) r} & l5 o$ N6 i. `6 y0 c2 t1 g( P
-->
0 P6 Z3 Y6 w; I5 j, w; E. u</style>
& q7 m; E- U7 Z1 }2 [9 x</head>
6 a4 E2 h1 y* u/ K4 @$ E: |<body>
. A* G6 z ^$ a9 E+ Z8 v& \6 n9 N<div id="pic"> ! z* K* N( n; _. g L7 P
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! ~- L/ x, i x; R( p+ v# W( D</div>
7 D& d4 H7 g, A. y</body> , Y% [% E$ ?% w) y- [! Z9 h; y
</html> 4 C& U3 x% L9 {+ E, C
4 F J- P& w0 {& V( o. Y' e
百分比适应:
+ i D5 T0 I8 O0 Z8 K7 M以下是引用片段：
+ t" R1 ?/ B; Z, \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; B# i3 E6 H; S" q# q<html xmlns="http://www.w3.org/1999/xhtml";> ! T- h, {1 f, ]0 ~
<head> r8 G4 l7 c0 Y+ @
<meta http-equiv="Content-Type" c />
0 h( t1 N( x5 D6 H" @( q8 {( _<title>css2.0 VS ie</title>
# ?7 F; ^0 N) i7 V$ N+ W* ^<style type="text/css">
, S# E2 D- U/ d1 `$ D<!--
' j0 B+ R7 ^ `body { 6 D( w( }' f2 I0 L/ _. |3 W
font-size: 12px; 9 ?" W2 U0 H: [* i/ A0 X8 X" z
text-align: center;
3 H0 c# e. o' u8 ]9 ?- Xmargin: 0px;
% z% e) g4 E. f* spadding: 0px; 5 V+ `( Q' H8 O4 k
}
* J) T! g1 t- i$ ?* i ]#pic{
/ v! u; F) _* T* U margin:0 auto; # [4 v% j a# p7 Z5 K
width:800px; 9 ?: Q. N. i( ~, |; {) h& a
padding:0; ( k( Q% V2 Q) b3 p: Y( G, ^8 V
border:1px solid #333; / f" y+ k7 W3 _) c0 z+ K
} 8 _9 K5 u6 v' k: P- o
#pic img{ ' Z" ~/ q# y+ I9 ?4 J) J, c
max-width:780px; / V9 K- h6 Q4 n c" r
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # s* q5 r9 x* C, B( ^4 V- U1 P# ~
border:1px dashed #000; / Y0 b a, F1 A G. u( G% b7 r; K
}
/ q2 p4 T! ?. a2 P7 ^ X--> G. ]+ ~! z4 b% ~9 I0 }
</style>
) _* y7 u+ C# G0 [: T</head>
+ ~3 c9 ^0 S3 v<body> # w* G7 s4 }/ S
<div id="pic"> 4 v0 f3 q$ y) G6 W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / g7 F @3 r1 q
</div> & {$ w x: E0 ?5 J% M9 b
</body> 7 f `3 I% T% g* b4 G
</html> |
|
发表于 2007-12-8 14:55
| 