|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! @4 V2 I1 c, }: U; b
关键在于：max-width:780px;以及下面那行。$ O7 d9 ?/ z, u* O0 \+ M
固定像素适应:: v% `6 L% I: o7 Y& l q/ o
6 b2 ~! A, i3 C. 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> 以下是引用片段：! o; G# h& [% Y- n* k$ a |1 v% z( p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 j0 Y: D8 s9 H4 C/ L- K# U
<html xmlns="http://www.w3.org/1999/xhtml";> - j8 M# Y4 G( P) L j! p" v
<head> " D; G) O' U+ o
<meta http-equiv="Content-Type" c /> ; @, m7 P3 [6 s% O8 H
<title>css2.0 VS ie</title>
/ D' g# U8 Z) ^2 Z5 A8 I! o( n" D& k z<style type="text/css"> % N0 g8 g( N7 ~/ M# b
<!-- 1 n. @* J( {; Z7 x# c
body {
/ I9 K) F6 d+ R: Xfont-size: 12px; ' A1 W( p. ^2 O1 Z- O
text-align: center;
. r3 ^; ]& c G2 h; i. {margin: 0px;
( U" u' }" ]4 P h. n, J$ c6 Mpadding: 0px; 0 ]6 F" C1 ?( k! x
} ( M& T9 k/ N. L( h5 h: A
#pic{ ; J& x! c# o: g! w& n: j* F
margin:0 auto; 3 s. V( K* [) b# u |% E
width:800px; 1 n7 l0 P" a: H/ ~) m
padding:0; : \; C9 Y" l) m
border:1px solid #333; " M' C0 Y7 w6 e3 U
}
/ x) v/ x( ^% m1 s0 E% ~#pic img{
% }, A; X- h7 t max-width:780px;
" W' Y! T5 G O; z! r' S, o$ ywidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 6 W4 S# Z6 h- Y4 W- F9 w" f' b
border:1px dashed #000; , }4 q- d+ |9 r7 ~0 [. U( G9 {, R
}
+ u4 i8 E) d5 i+ L4 p$ t# t-->
6 V( W& ~( J" c M</style>
3 C7 M6 _( k2 U1 z4 r- B X</head>
% y. C% ]6 X1 }8 j9 h" g<body> % T7 H3 `3 ?4 @8 F
<div id="pic">
& f- x% u% O- b; d) ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / U0 O8 B; j# D0 V0 g" d# B9 M. i
</div> # t& g. ^0 F+ U Z* P; ]
</body>
% U" T3 q6 u) m. q& U</html>
3 h' U' l7 X. ]5 X' s/ |: ^. h; ^9 y: a1 T3 I+ g
百分比适应:3 J. y3 t: b, P* a+ B+ i, f
以下是引用片段：
! c! z- n; u T& C9 _) m<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. r7 s/ t9 k2 h1 o6 a' k<html xmlns="http://www.w3.org/1999/xhtml";> , }! z7 W' H3 s% }& L' G& O. N+ r
<head>
5 j; w- o- V2 X7 I+ G! L<meta http-equiv="Content-Type" c /> 3 e( W0 m2 q$ i6 a) }& s
<title>css2.0 VS ie</title> 4 x; s, K; L* V+ q
<style type="text/css"> 9 U$ X6 c8 R! q- X' m4 T. x
<!--
' {8 n% ~) Z- l8 Wbody {
: p* a1 `- d/ E/ q/ v( ?7 Wfont-size: 12px;
" F3 x+ |) K8 i# utext-align: center;
1 z+ V. b" w* m- M9 Omargin: 0px; . a8 W% L3 I5 W6 [% Z; f: j
padding: 0px; 2 S3 O4 j& G1 I. C) X7 P% A8 V* m
}
4 N/ W& \3 n- ^#pic{ + u) T7 O; y( \+ r
margin:0 auto;
/ U# {" e4 p5 O5 l c" [ width:800px; 5 A* i3 y s! p
padding:0;
2 w0 W/ n! w/ i/ [2 @* c3 ]& m border:1px solid #333;
+ Y! ]1 ]: ~( Z! e8 G1 p" C# Z }
+ \. [5 z/ Q4 Y/ @7 A6 F' s#pic img{
( V. N4 e; [% W( Q6 o- W max-width:780px; % p7 C% ^0 a. c/ ~. T
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ i- Q; e$ N' O. T( Y6 vborder:1px dashed #000; 8 i- U& G$ ~5 B; v3 q, d
}
# ] h2 ?. `* v8 [/ ?% [3 O5 W-->
3 C; p, V! y7 C5 |! C8 E2 Y</style>
4 X% r9 F) |" f! r/ b7 h& r) B+ {</head> 5 |# w" r' j1 W
<body> , A7 _$ S. ^! Z8 R7 ]/ z0 V- z
<div id="pic">
: }5 B5 J7 B0 m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 r4 @$ {0 y i* J Q7 F) Y, s
</div> 1 x; H5 b- J0 p3 u
</body> " V& q* N8 F1 J7 O" i. c
</html> |
|
发表于 2007-12-8 14:55
| 