|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14367
- 金币
- 2469
- 威望
- 1647
- 贡献
- 1417
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ X2 V0 [3 C% g* w, k5 G3 L关键在于：max-width:780px;以及下面那行。
d& k6 x9 k$ V7 d4 C固定像素适应:
- i3 C* ~) p1 l6 k6 V% T4 Y
- D1 u; f: [) \dotted; 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> 以下是引用片段：
( j) `" s, v# n/ D& z+ S<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ U; O. e$ k6 D+ J/ e1 X. ?/ g<html xmlns="http://www.w3.org/1999/xhtml";> + w/ b9 ^2 M& K3 _
<head>
; [/ w# u8 ^5 [+ D/ j* d<meta http-equiv="Content-Type" c />
) U# J; M: k* C; R<title>css2.0 VS ie</title>
+ y6 a. J9 l) i0 m- x& v- L' w9 A<style type="text/css"> 4 Z w$ J, A# o1 l$ n. w$ h e
<!--
8 o; u; n# c, y" l. G+ y/ Nbody { * c# o! X! m: ^* H
font-size: 12px;
5 V! b- c2 X. r, j vtext-align: center;
/ K7 V# S( g* U* z( S9 Y5 Imargin: 0px; 6 C& }" {2 Y2 m
padding: 0px; 2 W% H. T! u: w+ z+ j( _
} . E" G" w3 d9 n1 b3 H
#pic{ : @+ D0 y" b2 x9 C
margin:0 auto; * B* M; m2 L5 U B- T X
width:800px;
8 F" m# a$ M5 P9 w3 P7 H padding:0; , `8 w q z# }/ d
border:1px solid #333;
2 m$ C8 A3 S6 N5 B1 [- I, t }
* I, i7 \2 l! m- T7 J8 |7 B#pic img{ # @ _ q4 Y3 q/ E5 m9 Q4 l
max-width:780px;
2 R- D5 h* ~$ Q5 lwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ( C( O' W5 U9 r5 F
border:1px dashed #000; + c& R2 R% k5 ?, W/ Y$ t! ]* ]. B, P
} # Q% w# E- \2 D' r8 Y# z, ~
--> 3 o7 O; C' z( @4 u- k1 X7 u
</style> t& u N" o: e/ J
</head> \, G2 m% Y+ R" J& ?# ]6 ^( J
<body> . g( H! Y: Q6 g. q+ q1 D
<div id="pic">
9 N; f3 J/ L. g# p9 T( @1 t* U" E# ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 q. H' p) {4 c
</div>
8 |1 m5 r0 H+ @8 L</body> 1 `( Q+ _0 D' B2 z y; c
</html> + } q3 c, _1 f: t" G
7 \+ R2 B- N1 d百分比适应:# H5 q( h( ~: x/ W
以下是引用片段：8 L/ E( t+ n, B: L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 Z, r _8 M; i& w6 ~
<html xmlns="http://www.w3.org/1999/xhtml";> 4 @! I3 h Y( j0 a' r0 Y
<head> 7 a. e) k3 s1 o z% R- P$ s) a
<meta http-equiv="Content-Type" c />
- I1 }# k, V) B1 {3 ?$ c7 l3 t3 w0 P<title>css2.0 VS ie</title>
- j; _! R- y# J8 Y<style type="text/css"> : V- i) j% _7 M6 B6 V' M
<!--
# _$ Z& T! i' Z( T9 w, l) H/ Rbody { 2 Q4 b/ J* k3 {' C6 I q
font-size: 12px; 3 Y/ e6 ]8 k) o' u" ]1 q/ }9 _
text-align: center;
1 t% [6 d2 k0 g, ~margin: 0px; " ^( p* L, R$ f: m
padding: 0px; # k5 ?+ B7 r/ H, h4 f) b: s
} 9 m% h, o" c& L
#pic{
: i2 t% e1 [8 n* r! X, x V* K4 F margin:0 auto; / W/ ~; a9 F" F
width:800px;
$ Z( K; g9 p$ c padding:0; 1 n$ R: M% @5 ]' P2 o3 X% F( h
border:1px solid #333;
5 [6 M& I* k- q } / g8 |+ q- d& F/ F- ^5 N$ N
#pic img{
. H) B8 i/ I+ H3 ^$ f/ S6 P max-width:780px;
" b/ M$ {% Y; m# ~. Q$ ~4 Jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & J" i. E" e% X: `# }( j$ o
border:1px dashed #000;
- W& ]1 z* g$ A) Q; _} 8 e8 K' g$ N7 G! _# l9 U
-->
: E P1 N: ~4 n# d6 b</style> & B3 w! }* t& D: d$ A
</head> 2 E# u2 q: t6 Z7 r6 S
<body>
! g7 j2 k; l5 P# e* d1 J5 S/ j<div id="pic"> 0 p+ c( l$ v! ~% l- i% P
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # S l* T. O) {2 m% u
</div>
% g( i; V2 D9 a0 y</body>
7 {& ~. H* n" D9 I" P; C</html> |
|
发表于 2007-12-8 14:55
| 