|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14385
- 金币
- 2478
- 威望
- 1647
- 贡献
- 1426
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! J$ D- T+ e* a7 x- @关键在于：max-width:780px;以及下面那行。
( H9 b, f% {) x: A固定像素适应:
$ L4 P! w( l6 u+ z) f2 U% X9 x. h
. y$ s& b" {5 c/ ]7 S& X9 Y/ udotted; 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> 以下是引用片段：* ? r0 Q& a0 ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, A1 c4 P. Y2 o/ ]+ N<html xmlns="http://www.w3.org/1999/xhtml";> 6 }! M* t& C) [" P/ N8 p3 v
<head>
0 K$ @! h( h+ ?# l4 ?3 U7 h$ P<meta http-equiv="Content-Type" c /> . Q+ Q1 J, c" H! B
<title>css2.0 VS ie</title> " I; s' e0 k! k3 s
<style type="text/css"> + l$ o% \, I- `' L. h, r( C
<!--
& L6 f6 z* R2 ~( j9 K8 C/ H: Gbody {
8 b8 ^# b" r# a9 b. Ofont-size: 12px; % N; ~" e* J& Z+ {/ ^6 C8 O
text-align: center; / F7 l ?9 j+ ^
margin: 0px;
( \3 I; V u6 B/ a; [2 A% U& npadding: 0px; 6 F- d' E" ? U4 k! f% u
}
1 P Y2 K; C8 R" s; s#pic{ , F, l% k& L x k' `' g' n, G
margin:0 auto;
M2 {+ j; Y: C( j& y% s width:800px; ( s+ N2 i5 R- \6 W* l. Y( _; Y
padding:0;
2 b' C, |! F* [' j2 y border:1px solid #333; ) r2 A* l# w& ]0 q
} ' `' o! {4 P. Q2 v2 I( v
#pic img{ * R2 j1 C L/ g
max-width:780px; # Q* [4 M( Z) M8 H( j
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ! W9 Q$ n& \# D" D, ?
border:1px dashed #000; 7 L; e& b/ _8 C- _! \8 q2 h. l
}
: B2 o: X3 F! H3 {-->
+ M( u$ S" O6 u7 A- S. c" A& m( ^</style> 4 B0 f( l q/ P* \, s9 O/ A8 a
</head>
2 T& W3 @8 O9 e6 u<body>
% q2 ?) P1 y v' T k) G<div id="pic"> 6 ^! @7 N O9 z' L. w# D" [
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + H* J* V# h5 [/ d
</div>
& G: p$ e% v c. K' U! s</body> $ r; n1 K; P" `) R5 W) }8 T
</html> % I1 v5 B* i# e: F% o
@ v9 ~$ }; I/ c7 T
百分比适应:6 G! N+ E& Q3 x% l. w$ m
以下是引用片段：
. a% V# @+ L C4 @8 G/ e* M<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. q% b% Q/ e! G9 R1 J0 m/ u<html xmlns="http://www.w3.org/1999/xhtml";> ) E: d2 S6 S7 q6 U4 k% [- b
<head> ' Q" s7 z9 T5 K0 ~" M
<meta http-equiv="Content-Type" c /> 7 k# s6 p2 P' H. Z
<title>css2.0 VS ie</title> ; W" V3 e1 ~8 Y2 q9 ^" S
<style type="text/css">
8 X" C6 G1 x ~<!--
, H0 j/ n; W4 A) V# c5 d3 gbody { # G1 v, {' P! H* U' U$ y
font-size: 12px;
" y, v/ k. ~, Y6 g3 z/ r$ [text-align: center;
~# Y, g/ A) G7 l" v. w' q1 Qmargin: 0px; 7 t# c% a7 y6 q& E" \* ~ g
padding: 0px; / g% L3 x9 z/ L7 `% n
}
5 c3 w8 {8 W8 z2 K#pic{ 4 S. O' I6 r4 _6 t; ~
margin:0 auto;
- Q _! e# M8 f( J2 q2 [) J4 j; | width:800px; 8 Y4 u |/ X% v! v; I7 e0 K. q8 M6 v8 k
padding:0;
4 o) W$ a, X# }& }4 Q \- G border:1px solid #333; / a2 E9 }# C; M' l% e
}
/ @4 Z" p d2 E1 r#pic img{ - r! x: p @8 X. D
max-width:780px; 2 u( x9 J% J4 Y9 `! G
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); $ p: S& m: H9 h; E
border:1px dashed #000; ; I' Z d1 e/ O% @0 k }$ M
} 4 U1 h0 V: \6 N4 m# ^, E
-->
3 x# o( e1 R" {, H& \4 d) \</style>
. l3 A! D" o0 a1 G</head>
1 ]3 P) N3 ]( _; U& h- }<body>
0 ~1 E! e: v# ]' q6 q<div id="pic"> 0 Q$ L1 n! F3 Q0 Z8 i7 U% s; G2 A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % ]1 w' b: P3 p
</div> # _/ N0 x7 ~% a+ _$ V: ~5 Q
</body> 4 ?7 R( r7 n" |- @% a/ I# Z
</html> |
|
发表于 2007-12-8 14:55
| 