|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 o0 k1 U2 j% o# d. j关键在于：max-width:780px;以及下面那行。
; s# q! v Q" \3 A+ q3 J固定像素适应:8 W8 o a" `1 n
/ a) M$ S. B& n" }- Vdotted; 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> 以下是引用片段：
/ S& t$ `, W$ _# _<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> & Q+ ]" t* ?- {- m3 x# p; X
<html xmlns="http://www.w3.org/1999/xhtml";>
+ f0 r7 a' J" i7 e<head> " M5 a9 y4 w6 T2 O6 R: y4 z# C( t
<meta http-equiv="Content-Type" c /> - }1 @5 T: ]/ b4 D
<title>css2.0 VS ie</title> # a: X M: A. i/ D6 X: W) n
<style type="text/css">
0 S0 F* D0 d7 [! L<!--
" p; P0 z- T! i1 L* A# p( t! D' fbody { $ }/ g" h D s0 ~; ^4 d
font-size: 12px; . w0 e1 F. c* E' G; W
text-align: center; 7 N" {; N, \3 t" T& N0 Z, v
margin: 0px; . L- U$ S2 M& W# p, w: a
padding: 0px;
$ z5 M _( h3 W# b} 3 r$ j6 R6 n) V) w n
#pic{ 8 Y9 `% R" V- l4 b* z, `* y
margin:0 auto; 8 ?; }/ K& o* @* l2 k( U( F
width:800px;
2 e; z, N, i. F. `) O* ~ padding:0;
" b3 H4 a4 P5 l$ _$ a6 n8 j e border:1px solid #333; 4 k' X8 A) n* O2 M, v" u
}
9 |/ K1 ^3 S" T/ z0 D0 b/ ]#pic img{
- t) \# V G" u( ]' d max-width:780px;
8 X' n; v# B5 U! }3 Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ! p: `. j, G4 D) H# w
border:1px dashed #000; / ~8 a2 j G2 K9 S- k
}
; a: c1 I/ R: Q--> # l0 n3 f( d+ {: S+ l
</style>
' d; t$ e; }+ r- o+ k( E6 T, ?</head>
- u* {: M% p0 C2 R; v7 Z8 b* E* k<body>
' g. q/ s' Z' \8 X) U# s<div id="pic"> 0 C( b% x0 P; h2 U. ?
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 q' h$ G2 E8 j& h# I7 i- T</div>
- g Y; q9 e1 j, s( Q( S! w</body> 3 J9 V0 J n+ |1 s
</html>
( D) Z1 p0 r3 a6 J0 B" F' g+ V1 D8 J
百分比适应:& E* I. J- N f$ ^
以下是引用片段：' g, Q. A+ N; z' p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" w0 } b) [0 B, j7 E" x9 M- z$ b<html xmlns="http://www.w3.org/1999/xhtml";>
6 T8 ~7 w8 I- L* X# u<head> * C# q4 {( I5 M& l$ p+ A; B
<meta http-equiv="Content-Type" c /> 8 P4 a; Y4 [$ a2 O9 J7 T
<title>css2.0 VS ie</title> - j- V2 w; Y z, x" a% o) A1 a9 @
<style type="text/css">
# l* t2 x/ n$ e<!--
9 Y+ L, n9 U) R6 ]# z8 ~body { 4 t+ Z$ {& }, W9 z
font-size: 12px;
: L. C4 _9 s ]/ Z6 {: ]text-align: center;
5 o _! q: c1 P4 H' [; a9 n' [, S9 }margin: 0px; ! G0 a9 ^9 [- r" b- S7 Z
padding: 0px; . V: l% o, R* S% ]& B) Y
}
, I$ `- d& d# S6 g9 x* b+ k#pic{ ; m; }( w# A/ H+ T
margin:0 auto;
! s$ b3 i) m( l5 f: ~ width:800px; % k& D! e9 \& Y- o. S q7 P$ S
padding:0; ' E) w0 }* N4 x$ \, s
border:1px solid #333;
3 U7 T; s( `+ g. g }
" F% m' y% E9 S% ?' }! J3 F#pic img{
6 _( u$ K8 Y' a1 q6 z4 ?: K* ]% O max-width:780px; 5 v- a* M9 ?4 l ^* H+ q6 _
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , c, w$ z! b' x0 |" M/ S6 v( {* m
border:1px dashed #000; ( s M+ S" _0 {0 J# L. _
} $ w+ N: R1 z2 Z
--> / H8 K0 f4 N. |9 l% g8 ]
</style> & z& L% g+ c+ B# k/ y" o
</head>
2 ]" ], j2 i; J<body>
1 [' A0 I/ y. z5 h<div id="pic">
9 u5 S' w* ^) N/ O<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
G& S& ^- N) R1 A* U) f( I3 d; S</div> % |1 a) O0 `0 \) I. Q' ~
</body>
. S- L' W' s. g4 @" `4 L: B. H" U</html> |
|
发表于 2007-12-8 14:55
| 