|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! n) Y) l# b" ^. D关键在于：max-width:780px;以及下面那行。1 P2 `8 m& y( r# f( c+ x8 w: P. g
固定像素适应:
/ P3 {0 m6 s5 K t0 p7 } s9 v' k
2 V1 }5 z, W! o- 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( {6 b# G, q/ ~8 a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% A- N; ]# J& l/ M& ?( ]% C<html xmlns="http://www.w3.org/1999/xhtml";>
/ L3 O0 a' i) S/ y<head>
- U7 X, t- E' t6 ?<meta http-equiv="Content-Type" c /> ' u4 D# L4 C8 F! j. H6 f
<title>css2.0 VS ie</title> 9 R G* X- S8 [$ ~. t: o
<style type="text/css"> 3 B9 K$ _7 w9 Z4 t; A3 }9 e. }
<!--
2 w3 ?7 x& p0 pbody { 1 y6 j- S+ @- v6 {
font-size: 12px;
- y- M* C! n. c0 q1 \ W) V+ Itext-align: center; 9 q2 u( m: [8 @1 Z4 ]8 Q
margin: 0px; + I( n7 S5 C/ U, Z
padding: 0px; 1 j. A @8 ^* [
} # W# R G2 E: o/ ^' M }
#pic{ 3 R0 q, `2 ?- ]& p
margin:0 auto; ' s! {- W3 s6 I, ], J9 V0 l
width:800px; 9 }% \1 F4 P1 B8 j1 f, U
padding:0; 9 N/ Q: q3 t; B% i$ z; H
border:1px solid #333;
1 M1 P# C& J. }7 E5 S } 8 z. Y, G1 z g% \
#pic img{
4 M# ?" {+ p( t; g- B max-width:780px;
% _* Y% s7 [* U- q# xwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); F' K$ e0 W' K9 `3 D) T; A
border:1px dashed #000; * ^9 j; B3 X* q$ [, [) G
} 3 H9 C& r u4 b( p0 f
-->
/ v L7 ~3 T" ]6 S' P</style> ' t" \! p0 a( r
</head> + J) }2 k* X/ K* Q
<body>
q: r% c4 O, t<div id="pic">
/ A" \2 {! U1 s; V! E<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , _6 l! J- A3 n- g% I
</div> ' {* E4 \ B& |( l; k+ k
</body>
' T& l% e: d2 M8 n5 t</html>
- Y1 z1 Y) R' P0 Y% A/ P& D/ t6 o1 p" x4 \& Q1 B+ m$ N! Z4 }3 Q
百分比适应:
& {* J: @& y, U6 D以下是引用片段：* X" h5 j9 P+ y; P0 O( R: g. s, |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( l! m3 Y& q3 c/ X- R" y: V o<html xmlns="http://www.w3.org/1999/xhtml";>
& P7 U8 G, F* Z; R- ^<head> . K* B5 t0 T* ^4 l1 ^5 d/ B
<meta http-equiv="Content-Type" c /> ) B: }8 K6 K! t
<title>css2.0 VS ie</title>
- u/ C( t9 V1 ^# G1 Q A' K6 B<style type="text/css">
, i) {" v% C' {! X6 u<!-- ! }0 L+ I9 K# \
body { 4 X+ T% j0 n* l, }7 C; M2 c
font-size: 12px;
, v4 k! s3 i2 H. ^# M4 O; qtext-align: center; [ o* ]0 F( J9 D% A; t; b. T
margin: 0px;
6 S; M |& ^! \padding: 0px; # N+ ~+ p. S% {2 J- m
}
, g: R0 d% u. X5 n2 s+ E0 @#pic{
2 Z2 S; f2 m( i# G margin:0 auto;
I$ d6 d3 P3 @3 K! y width:800px; . V, s: h1 O" d( ]. ]9 N
padding:0;
- Y. l% j' {% m2 Z1 W1 |: x; _5 K border:1px solid #333; : ^- K; h, X( H5 \; x) g
}
& t O! n* S' Z0 A4 L' n& D#pic img{ & W0 C/ U/ y' ?4 `6 |$ k
max-width:780px; 3 A4 B" f# s0 X. n, Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2 [. C% ~. P7 |. s. |8 K
border:1px dashed #000;
! v8 z l, i* F0 t& Q3 x}
" ~& v W T5 u% N2 ~: r: j--> 8 I* n/ S8 ?( M0 C
</style>
: j! b( ^4 h) Q* @+ u</head>
) y, E7 g. Y% j7 \6 l<body>
; j8 `& q1 \6 |3 _1 L n& S<div id="pic"> 3 ?$ J7 J2 @8 F+ T7 G) K
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
w! k8 W! U+ S' y0 B</div>
: x) W0 h; O! B6 V</body> ( N6 g$ d& B* V5 x+ c4 B
</html> |
|
发表于 2007-12-8 14:55
| 