|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 G8 m1 U; M+ ?( F关键在于：max-width:780px;以及下面那行。
8 W/ c; \# y3 ^2 |. C3 v$ e; D固定像素适应:
3 `9 n; Q K, y
4 E! E, { k5 C" Kdotted; 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> 以下是引用片段：' W$ E- M! E$ ]- x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" O' J: x( X% U O& H<html xmlns="http://www.w3.org/1999/xhtml";>
# d% k% b6 K- ~! n% D<head>
, e8 C {9 e x* j' {( c( i4 C<meta http-equiv="Content-Type" c />
: r2 m) `; c% c* h<title>css2.0 VS ie</title>
' h: S P, ^7 {" C) t/ x<style type="text/css">
5 Z/ [; F0 d6 X& {, z" J% ?; e" D<!--
: R7 |0 I6 g( O* T1 K0 P [0 P2 Abody {
0 o7 U% B1 P* a* Ufont-size: 12px; ( A& w. H% L) j$ j+ J# ?
text-align: center;
+ t6 Q3 o) |3 i& p! C- b# [margin: 0px; 5 m2 i8 _( a: m: @. o& j
padding: 0px; $ Z: i' K4 a# ?" |) M2 G
} 0 {. W" f7 v' {2 P1 {9 n/ l# I) K
#pic{
& Q2 [5 p b7 x% l# _# d, e margin:0 auto;
' y' H0 d8 P$ _7 r width:800px;
. S9 M3 p9 _* ?5 S4 s padding:0; 0 p O7 d& I0 R: @2 ~
border:1px solid #333; ; M3 j: _9 G% f. t ^ G) F, k9 a+ y
} ! v' F( {5 w" ~9 ^7 |3 m5 r
#pic img{
0 f; N! x9 R. r, y" I max-width:780px; - b' a7 V: F' L" H& s% c# \" M+ r
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 P8 _ f+ x4 H# i: L# Y
border:1px dashed #000;
: L" d; k+ a- X}
5 j5 c& g7 y: `3 B* @3 r--> + X0 l& `4 a) z- u# C# k* m
</style> ) O9 ^0 l* f0 o6 \
</head>
; B6 |" ~6 Z1 M# n1 a% I8 Z<body>
b! B& J* @: p3 ^/ P% m# p3 o<div id="pic">
7 N& P8 ~0 @1 O<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) x! h* p9 N% j3 L- o8 A0 v( G
</div>
2 |- W) L4 p( @9 c</body>
! s( V' g+ t) P; S</html> $ d! P: H3 g2 U8 g
8 c9 u M; c; w4 g% {& }
百分比适应:
4 E w1 k' K1 J# [; a5 E( t以下是引用片段：
4 e C( f% p. j# n0 _4 c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, L6 S# j6 O- e- }0 s% W5 P( ?<html xmlns="http://www.w3.org/1999/xhtml";> & { u( ~9 G+ i' I
<head>
$ s) K$ R5 |& r7 m) h* c1 i<meta http-equiv="Content-Type" c />
5 G5 i p) G4 c<title>css2.0 VS ie</title>
E f3 k" p3 V; m: [! ~<style type="text/css">
Y0 F' r9 z0 ^, q+ f$ @% [<!--
6 o% [8 |7 O( R8 R6 Lbody { 2 p& o8 l( T) I% k
font-size: 12px; 1 h( @9 ^0 x; t5 G: b% }/ j
text-align: center;
2 O9 j" F3 s( N/ W/ ?8 N: wmargin: 0px; ' l! L, j5 [2 B7 J) m0 K" O
padding: 0px; 0 C0 _8 |6 o y& N& M8 u
} ) F# R2 P- g" e- J) }; u v
#pic{ " S. {/ ~5 d f
margin:0 auto;
) @/ A& o" d4 p width:800px;
8 G; { f6 e9 } padding:0;
c1 z; t+ e/ Q y/ O1 l M7 Y8 ~ border:1px solid #333;
6 M, k7 P4 W. E; P1 p/ d6 B } : l+ A& N+ A* }5 c l4 G
#pic img{
1 C4 E! x% M8 ?; o5 o max-width:780px; ! ^' ~3 Z5 c" L" l- }0 G2 K
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 |' E Y% a8 I" h. N1 S& C% i, iborder:1px dashed #000;
t) H5 T( K _3 f9 g} 5 H9 Y1 b- j7 Z0 q6 t0 j# U* {" K
--> + y. f4 j* B: j. Y* l
</style>
2 Q# [2 d9 ]- h/ D</head> ! ?: J2 h. G) k9 m. q& {% I
<body> ; _- }2 L% N6 G2 T6 Q3 _- x( e
<div id="pic">
+ n& B' @2 p+ P8 M) A u$ u<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ O/ V" X9 m c% E; J
</div>
0 {7 k1 c2 Q+ {$ \1 y1 t( p</body> ) f- K) _6 D* ?
</html> |
|
发表于 2007-12-8 14:55
| 