以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
8 z/ A/ Q! G: ~1 b1 j
关键在于：max-width:780px;以及下面那行。
" P& }* V* m1 i9 @2 ]固定像素适应:
: _8 X9 A! g( D/ a7 m I
6 d+ G) |9 y; {% Cdotted; 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> 以下是引用片段：
$ B8 A) L+ R: I& g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 Q" X6 R7 x3 Z
<html xmlns="http://www.w3.org/1999/xhtml";>
8 O0 r$ `* [2 }: x<head>
0 R% U; y0 J' ^( I3 [<meta http-equiv="Content-Type" c />
' o6 K& j$ K: S6 k% d
<title>css2.0 VS ie</title>
' q# r3 z0 I. K" U6 b<style type="text/css">
7 p/ ~' k' W) c' e4 n* ^- R<!--
( G& ~1 l/ s# u, ]' w& ~( K* v. ]body {
, q1 L6 D, T( y* `1 ` Tfont-size: 12px;
8 A) ?4 ]+ T. Z1 }
text-align: center;
: u/ m5 \ M3 F7 d( G1 Bmargin: 0px;
# d6 T" {* D' V: f% X( X3 ?; ?padding: 0px;
! p9 [2 w% |5 c( R+ C
}
+ l' S. U2 E7 V3 `" }
#pic{
- l0 Y6 [! a. e3 N1 X: V* L margin:0 auto;
$ e8 w. G' C9 b6 t' n- C7 q
width:800px;
: d3 B6 x8 L. ^5 M& q, L6 h
padding:0;
" @" S8 D# G5 [: x" |# ` border:1px solid #333;
- f4 u) L% z6 `( k2 V0 }! H
}
R+ H% x, S0 q: N& f! f
#pic img{
( G, t9 Y7 T- Z6 K" d' o- L
max-width:780px;
! h7 A! _) t0 ^) F1 Owidth:expression(document.body.clientWidth > 780? "780px": "auto" );
3 {) q; [; [3 Vborder:1px dashed #000;
6 n2 c. M* S1 q; W9 k" U1 B
}
3 b; H0 z: z6 S' N ]& S-->
3 b3 @# v4 |5 r, l2 e* d( n7 A
</style>
+ U2 J5 u1 I( k/ ?) ]$ t+ n
</head>
# U3 C o7 f1 J- b, Q, n<body>
* Y! t0 r8 p7 n, J" m6 [, B<div id="pic">
+ D5 e, ~4 r6 m) [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif>
; N3 h" q6 @, s5 i7 H+ y
</div>
\: P# s% C! ?& ^4 W3 r</body>
2 h5 v- B5 Z3 c3 D4 Z; u3 S
</html>
4 n5 i* y7 |& x
4 L6 h/ }6 Q# T% r1 Y5 T5 Z百分比适应:
- Z1 n g3 k2 U( G: J! y
以下是引用片段：
# f, D8 e2 t0 Q& f. S( V3 N. J! e# `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! g- ? F2 ~3 l, x( G
<html xmlns="http://www.w3.org/1999/xhtml";>
8 z1 X8 t9 O1 N u6 k7 {' S" x
<head>
, o' _% e" ]& c
<meta http-equiv="Content-Type" c />
8 ?& y; F! n7 D! ]1 U( m4 Z
<title>css2.0 VS ie</title>
. B1 J" u+ }2 D( B$ u, \ y' T<style type="text/css">
7 D6 L0 t" m, i- u- w% M<!--
: Z8 Q; E( K# y6 H( L$ { t
body {
) E1 P6 D. @* W: n2 ?font-size: 12px;
* v" x4 E9 g, \" n- Y xtext-align: center;
, ?! x8 f" [% bmargin: 0px;
( p9 a6 q. j! h
padding: 0px;
* R+ U7 A' P: b4 w; i8 M0 H3 }' a% j
}
/ t2 @( v3 R+ ?6 N2 J# S#pic{
1 ]* W7 Y: E. g# e) h: g$ R margin:0 auto;
5 o# _$ C/ i1 [1 _ width:800px;
5 ]2 n: H, y: r( I
padding:0;
; P3 ]1 P! e+ \; S% T) ~
border:1px solid #333;
; d! n4 v8 t' U4 X$ K. a/ E( k! \+ J }
0 M6 o0 M* T+ }+ O8 S
#pic img{
- S) I& w2 ]1 I9 E* E. d max-width:780px;
9 b% i5 S2 Q) q1 h& swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 W0 k" Y* `0 x4 eborder:1px dashed #000;
, A9 \8 {) s) e}
8 \+ _2 r# ?! h& _; m8 y6 W-->
6 k3 t) S" _7 f! M
</style>
i; I& J/ H) F8 C6 H
</head>
+ W. g, f3 o! H/ D- J8 Q<body>
1 O0 ?; x$ B( I+ \% x0 i+ _<div id="pic">
) f3 E& H- ~7 _- H5 d/ Y) T. L
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif>
( T) \; `6 u; @8 M4 L8 S
</div>
9 G2 b3 M% v9 k, E" f. M. c- `( L</body>
# X# |/ p1 I3 Z& ~9 g4 i7 n</html>
