|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) V7 R/ x# z% L% }9 D关键在于：max-width:780px;以及下面那行。
5 z3 F/ R; E2 L0 I5 `固定像素适应:' ]; V8 O' n1 q9 x0 E& `5 @# }
) }+ N2 m7 y0 D) I7 N; M4 _0 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> 以下是引用片段：4 {9 c# m1 L0 T$ H% L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 A: M. o2 ?% [+ f* q9 R/ C<html xmlns="http://www.w3.org/1999/xhtml";> ' N4 e$ g6 a: V/ ^1 Z
<head>
1 b0 K( M# C" }: S! z<meta http-equiv="Content-Type" c />
8 P) O+ k+ F! B8 [4 {/ t<title>css2.0 VS ie</title> 9 j# A; Q% E% h! r2 X& w6 p, }
<style type="text/css"> 6 l, u g# p3 e
<!--
8 I3 S3 M- N, E2 L5 j# U9 T" z. bbody { 8 H6 x3 o ~. n* \9 i
font-size: 12px; 4 ]5 \. F7 e1 J1 e5 i4 Q
text-align: center;
1 V S) X2 N6 { p/ a2 Vmargin: 0px;
% i4 L) b& Z8 c9 U' q2 Vpadding: 0px;
$ o1 l: t L: e: s9 L. |} 4 K* b) J2 N) I. i" M+ O" s
#pic{ " N1 [! k/ v0 [8 L
margin:0 auto;
. L$ j6 F% M# h) ? width:800px;
0 U8 A: S6 }6 B5 I padding:0; 7 R! J, W6 d: r% P
border:1px solid #333;
! V g! ^( f7 X3 F6 e } ) p( J( ?) E$ f# W/ z+ y# F& n/ ? x
#pic img{ : h$ f5 S5 `$ j+ p" J% f" f
max-width:780px;
) z1 G( @/ L; Y, a% g( e [" Owidth:expression(document.body.clientWidth > 780? "780px": "auto" );
5 Y0 t5 m F% x. \: C7 ]border:1px dashed #000; 9 D) A6 Q9 N: H$ t' D! n# j
} 4 f& s) @, ~7 h- ?4 N
-->
* ^3 Z6 \: l8 U% `3 b7 S</style>
) M" _: P" d. A2 x6 u7 O4 v Q* |2 f</head>
3 |' K$ Z3 [5 ?2 a T6 U<body> y& r$ k4 d, J8 r; h) C Q* _
<div id="pic">
' e3 d4 ^5 B. z, w# j<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 g1 V: g! k) s/ _
</div> " @6 `' P& R# e2 [& [2 `7 V; e2 s4 c
</body> * b0 O8 `7 R: ` ~8 C; H) {
</html>
1 l% o2 a: Y4 V% N5 [) J" o* l' s X1 }: j2 {
百分比适应:! e$ H+ X; `* u: f. K% }7 O
以下是引用片段：% ^& W! \2 y5 q" c. g& O
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 |- S. `9 U2 t& ^% |$ o* M<html xmlns="http://www.w3.org/1999/xhtml";> 8 ^/ x7 a+ K+ o' z# o. a
<head> 4 \8 G ?8 r' X5 {0 g
<meta http-equiv="Content-Type" c /> / u1 @2 R/ e+ F% o6 a- {3 e
<title>css2.0 VS ie</title>
8 R7 V A$ N, Y }' x4 y9 ^<style type="text/css"> : N; L/ h- Z7 G; I4 |/ s2 p
<!-- 4 \3 R! ~( a3 @+ J
body { % H7 Q: Z9 D: ?
font-size: 12px; " Z6 A, [2 D7 F$ y5 U
text-align: center; # M0 n" X, K- q7 a C
margin: 0px;
) m. i) Y5 U+ g' o$ `padding: 0px; C" r2 r' {3 i0 `8 M7 ]3 |1 p/ T
}
- P2 |5 Z( G4 H#pic{
% H6 G- U" j+ S% \4 G3 ^ margin:0 auto;
5 L5 L8 Q! S2 G& }) \1 h width:800px;
7 [3 A5 O$ l( M padding:0; . I. C* w' k5 [4 P& s) j
border:1px solid #333; - @1 f, N) i1 @9 X6 p3 q2 ^
}
. Z2 M4 B5 J! z0 E4 u+ l/ ?#pic img{ 5 B( J* z( K6 ]6 ]0 e
max-width:780px;
! N$ v n/ s; ^' W& K) ]( ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. R4 l& U4 U w6 C& ^border:1px dashed #000;
* {9 G# d% L4 o}
' m# d# a* x, T/ a. O3 S R-->
1 J5 j; e# p& ~8 x</style>
% a6 z1 }! |8 K: g' g6 A. p9 w</head>
4 e: x0 M' l) }* b<body>
" r* }5 ?) r; v$ m+ g) C<div id="pic"> + p, U0 N$ |" h5 v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
j! K& X' j8 m+ j2 |+ R</div>
; D( H/ T% c- {7 i4 m# t( m) x7 ~</body>
! T: v$ N, h# L0 h" I</html> |
|
发表于 2007-12-8 14:55
| 