|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14325
- 金币
- 2448
- 威望
- 1647
- 贡献
- 1396
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 W4 g+ V; Q; y9 l8 N+ S关键在于：max-width:780px;以及下面那行。
0 b2 E0 R$ C9 V& K固定像素适应:
% H9 Z/ ?! X/ |1 x& E- Y
3 R9 N- Q+ \# v* Ndotted; 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/ C) V6 }) C* H; J# e$ E<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . n0 B# G" R8 r% i6 O% M; E
<html xmlns="http://www.w3.org/1999/xhtml";> x. b* j, T1 O. B) y! N% }
<head> 2 c& v3 K# f! _! _2 Y
<meta http-equiv="Content-Type" c /> ) r5 ^( @$ g& ?2 ^9 q' e
<title>css2.0 VS ie</title>
* a- z. p- H9 C. W, V C# p<style type="text/css">
6 W6 z! }( ?# [+ T! b6 `<!--
' w" F. P3 T& P1 D) Q' ^body {
/ b& ^6 y4 ]) s8 |font-size: 12px;
5 b& o% i! b; Itext-align: center;
# ?0 q3 E" M8 l& ]4 Fmargin: 0px;
2 r% G z- z# r. C* Ipadding: 0px;
& h+ R- f9 F$ ?6 L/ ~' R: J/ I! f} , f& ^* R! V& }8 r6 h# ?' O0 k
#pic{
5 s* d7 N" b. Y' ~" g- d6 ^ margin:0 auto; a8 ~3 L& Q+ C& R; D! l" H5 i
width:800px;
3 h! y4 T5 V- ~8 i9 i, } padding:0;
5 }! G7 ~4 g7 O+ i3 n, k border:1px solid #333; ) n. i: j5 e% B+ h3 {6 n# a3 q4 v
}
* {/ B6 ]# U$ k* M: H#pic img{
; o$ ]) k0 o, L4 U, c max-width:780px; - Y+ Q( i, w4 }. M. h
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: f1 E3 @' ?" z- x# }9 [+ Oborder:1px dashed #000; $ ^7 G2 s' P! ~; e5 G
}
& i$ b' S$ ~. o1 A8 c3 i( L' a. u-->
/ E' x# t9 ^/ h1 O1 r4 P</style> " K6 Q, W4 T" Y9 s( E
</head> 9 r( u6 a0 |0 H& }: [& {
<body> $ Z# L4 M5 [# _* r
<div id="pic">
& n) X6 I3 r6 }# D) c' ?. P& l( |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, Q& [5 }) {3 M0 q5 Y. S D8 @</div> $ |( j! w- j, d& M9 s) h& Z
</body> 7 Y* {' j1 A6 h' c, @; L2 P+ G, B$ v
</html>
: b6 ?: D* L" P( l$ Y/ ~- R" R* j8 M: G- |
百分比适应:
: t2 p( a4 u" C( B* o以下是引用片段：
* W6 q7 B+ r8 C) f! w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 ~+ D) b7 [) `
<html xmlns="http://www.w3.org/1999/xhtml";> 0 \' v( e5 j' u/ R4 j# O; r% `
<head>
3 C; j& n6 \9 N<meta http-equiv="Content-Type" c />
. F& C9 O7 V" e7 K9 Y1 |- L4 X8 J$ u<title>css2.0 VS ie</title>
# m$ L* _) P1 N! {<style type="text/css"> ) |: A" s- d2 `% E- O
<!--
; u( G! d. n! h; Wbody { ( u7 o7 c d q8 B. Q5 b& I' t
font-size: 12px;
, S/ B: V7 |: C4 }& S/ N1 ~" K/ gtext-align: center;
2 g. h$ R& h; Smargin: 0px; 6 A+ f" q; _$ r3 ^0 m
padding: 0px; 8 {- U' L$ R; C/ r
} " i! n6 o# H4 F0 n/ o8 B6 ^
#pic{
! O% ~3 G8 q/ E8 O/ H. N margin:0 auto; 5 t8 E. x# a' K$ Q8 i. G T) z' G
width:800px; ! r) o$ L3 }8 N( S5 c$ _) {+ O& c* m
padding:0;
9 E ?- h. J4 \8 b7 _ border:1px solid #333; # K' z0 `- B( a0 r
}
, ]4 s) [' }7 ^% ^#pic img{
' M6 v* P( Z. B' }% L max-width:780px; 6 \& h$ g) T1 q3 I: Z" T+ g4 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & M" p' H% u9 O! w" B
border:1px dashed #000; 9 h- V' R9 V+ b8 m( s5 }
} , B, i3 m7 V5 \. e& X- m2 p3 X) k5 e- C: r
-->
- o( v3 s% y7 ~</style> : N7 u4 d F% G2 O9 ^' U. f# O
</head> 2 f5 A" e* C/ d, M+ j
<body>
& w8 u: S- _& T! D( J* g( ^<div id="pic"> ) i' X' O7 } T0 T0 \4 c0 f. D
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , k6 p( I& U% }, R2 g0 a7 I
</div>
3 k0 A# p M. X: M7 f8 w+ [</body>
' s1 z. P* r) w9 I( m2 d* j3 m</html> |
|
发表于 2007-12-8 14:55
| 