|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 l/ t5 k l2 h关键在于：max-width:780px;以及下面那行。5 p# U5 k0 ~4 i& ?! Q6 l1 s) ^6 b
固定像素适应:
6 g4 j: P v5 ]+ X! b% S* N
V/ X; n" l6 Y- H4 X0 @/ Adotted; 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> 以下是引用片段：' }" x! ^4 V8 a* K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 E" r) D# R) }: L8 D; j, A7 N
<html xmlns="http://www.w3.org/1999/xhtml";>
2 j# X0 J2 `0 G- s- g0 y<head>
0 b8 I2 n/ b6 l; L' t2 p<meta http-equiv="Content-Type" c /> 5 g. y3 |; } n4 G- `. n% V- U/ e& a
<title>css2.0 VS ie</title>
+ w# U5 T& U& l' u- f7 \<style type="text/css">
9 o( X% E. U" K0 c" X3 }4 u<!-- 3 O+ u0 u1 r2 H% f( b
body {
4 T5 g& y) S+ U+ [" Bfont-size: 12px;
* x& T# i0 y) etext-align: center;
0 D! k& ~. |7 G' M, S1 K& \margin: 0px; " y: L4 M, o' s! i$ ~
padding: 0px; ( Z' |: p, ?$ Y: k }; a, J" y0 K
} 9 f& a S" p: z" {1 z* Q
#pic{
1 P8 L6 Q( O! j7 \5 W7 P margin:0 auto;
6 d$ U' L1 J- u( i$ {% c, p% H width:800px; . B3 a* l, `" e* M A$ u
padding:0;
7 M. X3 }1 L: ]( g9 i border:1px solid #333; " _, x6 j9 A/ R) h3 Z7 L+ @& y
}
) o0 X( E4 D* k& C#pic img{ : J* t& B$ X$ ` ^8 k" c4 m' H; Y
max-width:780px; $ D3 k" E% n& D& f( c
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# Q' D C4 W0 B% }0 b9 ]border:1px dashed #000; : ], Z9 w% V1 A- \
}
' j: f5 D/ T* a. U2 j2 _--> . ~3 H6 c! A. k
</style>
' i& A- x/ }; T9 M" U7 u/ X' ~</head> 7 @' F) ~$ a! Y+ i( X
<body> ; S3 N1 s5 E3 o
<div id="pic"> j W6 R! u) `. N1 u* e2 b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 C( A1 k7 Y# X3 O4 P5 a1 m3 J
</div>
, g) A. c; Z( w/ D5 ?</body> ' d3 i4 i# t H( Y$ X( q7 r
</html> 3 @1 Q( n; Z/ Z" C' N( ?
* q8 i% F- d H' m! v百分比适应:3 F" L* m* J5 a% n- E
以下是引用片段：
# Z8 z6 |) z. P) r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 z" \1 P; q) c9 w" V<html xmlns="http://www.w3.org/1999/xhtml";>
4 M' q1 n$ M7 L1 B% s' U<head>
# j! b; Y+ v' j4 e<meta http-equiv="Content-Type" c />
9 [" M z' h/ \. j. e7 O<title>css2.0 VS ie</title>
/ H" d3 g( X4 c: i& ]- w/ d) N<style type="text/css">
! z, e2 ^' v D* Q# o<!-- 4 b% B4 g/ [ w! b; z
body { " \8 [# T( ?- h& n7 f
font-size: 12px;
9 Z0 R0 {' j; M1 H. |text-align: center; 5 ~/ {, A- X1 O
margin: 0px; # o& S9 d. {$ U8 s8 f& x, W% U
padding: 0px; 5 S) @0 Y4 S% b, l4 d
}
; w E9 v8 s" e- I) h#pic{ 5 I# A( U6 }8 r, @7 ^
margin:0 auto;
# a! R2 i9 G9 r width:800px; 5 C6 R0 c2 ]! }7 ~* J0 C( V
padding:0;
5 l9 r4 o2 D) b3 c) ^/ E+ V! C: [ border:1px solid #333; s& O8 I$ o0 y6 {( k# ^! t
} , E5 `, ?4 F8 t4 W# g4 m
#pic img{
0 }& ~) o+ [$ w ~+ Y* L1 K& l max-width:780px;
8 I$ d1 ?, A) d, E/ Z; A) lwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
?! e5 X1 h5 O2 _7 _border:1px dashed #000; 3 C8 W4 ^' ^3 B0 X5 z* a
}
( p( F+ L) N$ n--> U/ _; J8 g6 R, }4 n8 G
</style>
# y6 B2 `" ^5 ~ C/ |. Q, c7 x" F+ }</head> # C: k1 `0 T2 ]) d' d
<body>
! i% r$ p; |2 ^<div id="pic">
- w/ F: a7 ~4 P7 ~/ S* D9 P<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* U) R5 w7 b5 T: V- B3 ]! s. U</div>
" c$ y# q" V4 w- M6 p</body>
2 O! a$ B) ~' ~% y</html> |
|
发表于 2007-12-8 14:55
| 