|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。6 d& m9 E; V7 Y) e8 \
关键在于：max-width:780px;以及下面那行。3 {3 q4 z5 H x
固定像素适应:
2 f) J0 r: ?% y1 i2 ]( z: z) t" O
. D' J: c8 t! R9 gdotted; 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> 以下是引用片段：
' ~1 |0 n: N3 S& p4 ^3 k! M, _+ m<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : N* C: {0 Z1 n+ ~; K; d
<html xmlns="http://www.w3.org/1999/xhtml";>
+ j; |% G! R6 g+ h- L( H+ H<head>
2 @1 I$ W% ?7 t% K+ }5 K<meta http-equiv="Content-Type" c /> % G" b- y; i0 {" q1 r; K4 M
<title>css2.0 VS ie</title> % E6 P z( F* ^
<style type="text/css"> 4 U7 a+ E! P% G9 y" F
<!-- % g7 W! {" Q# ]% a$ G7 ]3 V
body {
# [9 Z: F( w$ F% lfont-size: 12px;
- X1 V1 L7 K, g; ?, G. a3 Mtext-align: center; 7 H0 Z3 \* S i
margin: 0px; 8 A3 v1 d! \8 f" e8 u
padding: 0px; 5 z t9 {$ @' n2 g" ?
} & @. s4 H9 Z! N% ~5 z
#pic{
& j" ?, h& |/ G margin:0 auto; 6 a. `+ v0 O, w. e2 a
width:800px;
+ g3 Z' c% B) H" @* X padding:0;
4 t' f/ l7 P) R: H) b border:1px solid #333;
1 _+ ]- _. m) g* ?# S }
# n, F9 M) k K#pic img{ 4 p& w" q1 }( y8 L# T; K7 X$ M. R
max-width:780px;
/ c9 ~& H# k+ F3 \% r( m2 V% qwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 T! X, ]$ a9 ^/ y0 o( ?
border:1px dashed #000; . p& x) x6 v# J' C0 w
}
3 L% q& u' b' a0 L" F- Z% z-->
% H4 ^8 t z0 o* j- ^9 R- h</style> 7 c- Q: j, W" A8 _4 g
</head>
' Z/ p; h4 H& T- A2 y9 P<body>
# M/ _- {* I$ c- Q' [ E7 k: @<div id="pic"> $ E% u& R' X1 T1 b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 H2 p' ^. h' B( Y6 }9 p
</div>
3 ]) A) |4 r/ U g2 j</body> ) B0 ]5 k: |" F0 x+ O
</html>
* y7 l$ s7 r( Q+ Q3 h7 k- A
) c$ X) @* s! O百分比适应:& z2 r& m4 G1 n+ r4 M" Q
以下是引用片段：: b- X1 c# H6 J0 w# Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) ]' G+ T; G# L! A' {9 O) S<html xmlns="http://www.w3.org/1999/xhtml";>
_' m: \6 M3 Y<head> ; t4 ]2 C3 _( |4 G4 ]$ K6 n
<meta http-equiv="Content-Type" c /> $ p) Q3 g; C1 m% q9 L/ l" E
<title>css2.0 VS ie</title> ( a' p& \$ R( p, i/ L1 a
<style type="text/css"> * Z$ k2 O$ W9 j& @4 I
<!-- 0 \1 a+ ?" g/ V; J0 I- \2 a u7 \
body { 9 W: k' u c# R* ~8 k1 V/ ?3 b+ `: b( E
font-size: 12px; ; ?" _& u. K L G- f8 X: s& B# O: \
text-align: center;
% S8 p$ C B, x* [2 s% a* C4 Vmargin: 0px;
( j0 h/ M5 k* Z$ A; e Gpadding: 0px;
. v" @4 W& ^' x5 J# t" t}
8 G8 x+ i, l) h$ \#pic{
q( A; f+ D0 B* t+ ^, s margin:0 auto;
+ E; M' L! |! u: o! T. f; p( { width:800px;
7 s) @% n( Q* ]; J& H7 n8 b padding:0;
3 S w/ ]% m% ?' Y6 B# C border:1px solid #333;
, m. Q, X1 t |# `) q- [% Y } 0 K3 ^% x& [7 z5 q
#pic img{
8 j- k1 p5 o$ ]0 g: x9 n, J) z+ y max-width:780px;
# P, x# q1 |* U" i. [+ q) t* U5 Xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : N- @* F5 D$ d& Y# t
border:1px dashed #000; 2 c5 d3 k( K! ^) T! C- Y
}
! L' A! K: I: `--> 8 F* y! Y$ r0 u/ H
</style>
3 u. B$ Z% J9 x. |* F, ^& P! N, j. `</head> P8 d% C! Q! U5 Y4 Q9 _$ S# d
<body> . c( r+ Q4 s ?: ]# P: h- w
<div id="pic"> % }: Z4 D% ?$ L5 o& N' I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 ~8 b; {! `2 V2 o8 _
</div> ! [2 f6 b- t8 ^* l' l2 B! i
</body>
2 M$ `+ |0 p- F8 O2 D</html> |
|
发表于 2007-12-8 14:55
| 