以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 4 F. ^4 b. V/ A6 D$ w1 y关键在于：max-width:780px;以及下面那行。. ~' L0 c7 T: b 固定像素适应:1 p; D: t t0 Z) L# `4 F6 I
! y% [: n1 \5 L/ A, ]1 Z+ pdotted; 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> 以下是引用片段：% ]0 {5 L/ `' v. V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , G5 o( k. L) c/ e<html xmlns="http://www.w3.org/1999/xhtml";> ' Y# o, ^& g% B( H<head> & A7 |$ n% C# i& t* Z! J
<meta http-equiv="Content-Type" c /> * O2 [' j' T' e0 X<title>css2.0 VS ie</title> ! z8 V' k* g! T3 u' \
<style type="text/css"> + @- |# h: p( h$ o1 a<!-- 2 ], J% p5 G- l) C# I
body { 7 F9 [) s7 C3 y, t
font-size: 12px; , Z0 P6 ?$ P8 a# b% p& Otext-align: center; 9 @ E1 Y! P- ^7 l* h4 b
margin: 0px; x y- D" O% M4 l. y) S( ^" Wpadding: 0px; , s- D2 N4 X; j/ c4 S$ J3 R& F
} * b$ S. f, E! N" t$ z; d
#pic{ 3 V( N" t1 {# m- m, ~# _ margin:0 auto; / _! ~) f( b2 U1 P width:800px; , I! B) P5 b. \: l7 Y! L- W padding:0; + E C# Z0 G" e* Z1 ]5 T border:1px solid #333; \, z: G ^. r: q& F$ n S } 3 h* u2 P* E+ O6 K0 T#pic img{ 1 ]# V% i* i# X/ F max-width:780px; # V5 ?! e" \" L N3 W0 Owidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ! t1 V4 ^& m1 gborder:1px dashed #000; ; L7 M8 w8 {4 K: u$ I9 @
} - Q. s( f/ a1 n z0 _; i--> ]$ n0 F; F. p, h; X2 n2 H& {
</style> * C g+ E- ?: U y8 C, D</head> . A4 d6 j7 G; _- Q- e" b E7 U1 S
<body> 2 [$ X) N$ T& x- S<div id="pic"> 8 l) o% \' ^1 X! s/ q! \/ ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 U8 U% `+ v7 a" f* J& t7 y
</div> ! ?, O3 T8 j6 y& \
</body> D K, S7 e; {* I V7 D, t
</html> 2 V* m$ g% q3 X$ t! n$ D, r* [% E
- r7 ^5 F: S2 m; E) R3 r百分比适应:+ Z5 Z$ {. C. U7 K- _
以下是引用片段：; E. p. m6 k! ?- }. B( a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 ^ G/ ]- }+ n! g2 V% g
<html xmlns="http://www.w3.org/1999/xhtml";> 2 {2 Y+ z6 b! N; k; z5 ~6 Y0 E
<head> 6 D; z! r. l9 V: U
<meta http-equiv="Content-Type" c /> 7 _' Z+ ?0 l8 h& h) j6 t) t<title>css2.0 VS ie</title> 3 X( z+ u/ \9 k# y
<style type="text/css"> / z. T0 X; P" j! C& |& ]: P9 I<!-- ! Z4 S3 O. L* f! u1 w. R, P1 H
body { 3 M. X4 o) C# B J/ r
font-size: 12px; 2 M0 z/ g1 @9 w E) x- w, }' w, [text-align: center; & P; H( u, d/ l( r+ I
margin: 0px; , ^- L5 |, ?8 ?/ B1 F" S& |! ppadding: 0px; , {2 T! }) E" K5 C/ d
} - z6 O7 B0 K9 N g# [, Q#pic{ ( X; j! c' ]5 m2 A
margin:0 auto; / `, L. A/ S# A/ m/ ? width:800px; - L. U6 I# n% I7 v7 k
padding:0; ' {/ g7 A2 a. O border:1px solid #333; " _1 v+ H$ [# ^( K6 P7 p2 D
} ! W0 J3 w8 d# ^0 M9 ]9 P#pic img{ 9 h1 l6 c7 C$ v" z5 r( E
max-width:780px; ) o2 ]" ]# N$ _0 |width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ( z1 m5 ]& P E; M, Tborder:1px dashed #000; ( i/ O/ g) c8 y% X7 M( G} $ ~* D$ U, o# h) d! C9 Q1 g: g; L--> ) W4 z1 r8 q) i/ ~6 ?
</style> 4 z1 ?3 d! A. ~. ^) x9 A8 r1 T</head> # C3 c, w7 h" a9 ^2 R<body> + e4 Y! ?3 X/ Y# d1 a<div id="pic"> ; `9 x/ r3 G o3 ~! C+ w0 `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , F+ w/ x0 h: P- \) c4 ^& s
</div> % i) r: F" }2 X) x
</body> - U, h" z! G' {9 A$ s6 _
</html>
