|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' r \+ R+ s" L$ R# B
关键在于：max-width:780px;以及下面那行。6 j: i" i! d6 `# V% M. T3 x4 Y
固定像素适应:
! {% ^1 R$ ^ u, J" _# ]6 @6 O- R! U- Q, M
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> 以下是引用片段：
0 }6 h) _% Q9 y2 E' `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 b w; e& A! S2 I
<html xmlns="http://www.w3.org/1999/xhtml";>
3 ^. ?+ t% j# U6 a; B# X<head> + s5 x9 c& d* N( e
<meta http-equiv="Content-Type" c />
, Q4 h9 k% y2 U3 N0 p; k0 @. N7 Z<title>css2.0 VS ie</title> % o; E. I/ S0 P" Y
<style type="text/css"> ! X0 T/ X) }7 j" r
<!--
: U$ V: o) e# g' q6 D: rbody {
; T+ a" o$ K. R$ g3 ifont-size: 12px;
: N( w& E# |2 ` R0 t3 Dtext-align: center; 2 A0 w* H s, e; u Q, N
margin: 0px; 7 G( c( f* R- I3 E" E" i8 P
padding: 0px; 8 B5 e& k% _ o, F$ d
}
! e2 t9 s5 A9 s5 b. N#pic{ ( v% H7 |. V8 }" b) m! ?; i8 a
margin:0 auto; 8 `/ ?' N) d8 C! a, n1 h' D9 v
width:800px;
1 \+ x' [ S5 C5 ] padding:0;
. N j( N0 i4 R Z+ H& q$ V border:1px solid #333; 0 E" q$ z( u( W! q" o
}
- }. P8 `7 a/ Z7 M% w#pic img{
, [8 n5 i5 M8 c max-width:780px; 0 \1 a. m1 E: \* E1 H3 m& t
width:expression(document.body.clientWidth > 780? "780px": "auto" ); & B" E/ D* k! m
border:1px dashed #000; ; q, i. U3 q; }9 R: ]% Y
}
* e7 ~9 ^+ b0 z& I/ ]--> 5 G# p6 |3 e* H. }8 ]" V" K
</style> , v8 Z9 y. t- b- _1 m
</head> 7 s/ b6 D& o- k+ `. I; S
<body> ( Q! D0 E$ T5 x" t& `, M
<div id="pic"> 3 ^3 ^( q- p2 W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( X8 {0 Y' m S4 e. @ W+ Q</div>
' x/ U% e4 j! ]9 K</body> " @* g: ^2 V6 _/ }9 w
</html>
' E6 h5 Y4 Z: S. m- Z/ @9 _" h2 W7 U, Z1 j3 w
百分比适应:$ }, y0 H* C, e. G% z5 S5 `$ c
以下是引用片段：
& O. }1 u+ i0 [, ~3 P+ s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# n% u7 e, o' m. O<html xmlns="http://www.w3.org/1999/xhtml";>
# [0 T! q2 o2 p+ N a<head>
& M, c. h+ X+ a3 e' Q% R3 s$ W' |<meta http-equiv="Content-Type" c />
# J; d! z: }2 K, E<title>css2.0 VS ie</title> 5 G" l0 I( ~: J* \) @0 b3 U8 d- U, j8 z
<style type="text/css">
( J( L. u9 _. Y' R7 ]/ B$ m* @7 O# B: e<!--
! V7 n/ n$ G5 d$ {3 X: M" wbody { / I" w8 a* b# i
font-size: 12px;
/ q& L: y2 @' P/ Mtext-align: center;
0 e" b# o& ^2 C" ^0 Tmargin: 0px; 1 Q( ?# `7 H+ g
padding: 0px; * F3 X* j5 V `; \; C
}
# \- {* b5 v: n. Q#pic{
9 T( C- N+ e' A( E* Y margin:0 auto;
3 V/ \8 _/ Y& H- V width:800px;
$ a# F4 S! Q' ?; K+ _1 p1 s padding:0;
8 N- z) f4 u+ e& z3 V! R% h border:1px solid #333;
+ Q* n* B( ~' C" F } # P7 o( b9 u: H$ t: T# {0 {% \
#pic img{ 9 C) I2 K5 x) I7 v' E, N6 }: O4 h* L
max-width:780px; 6 T% h& S% c* h( Z. q7 y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " s% P4 v/ B; V2 B
border:1px dashed #000;
C6 A1 u3 ~- z: q1 \3 H7 M0 V} / M5 Q5 F" l8 q- H. }7 E
--> $ P; w+ p* }6 |* ?
</style> . h; A( T1 L) k9 Y
</head>
7 I" w: q/ T$ N5 }' f1 c% N$ P<body>
7 Q; v( X0 o9 z8 K9 ]/ N& M<div id="pic"> @: K/ r- v) K4 W* w
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: c* h6 s0 g0 e" b$ u</div>
# Q7 w. J& M5 g6 ?3 K+ j</body>
' m4 p ~6 e/ _; C% v+ h) } e</html> |
|
发表于 2007-12-8 14:55
| 