|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14163
- 金币
- 2372
- 威望
- 1647
- 贡献
- 1320
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。7 U# O) E$ ]6 O
关键在于：max-width:780px;以及下面那行。% t8 x% F* C2 L. @8 Z
固定像素适应:
$ L# v1 R5 y/ Z+ p8 e; n% o' P# Z5 B4 U# J
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> 以下是引用片段：! W3 ]+ O! `/ f% ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 {+ e3 o7 X' D' G/ r<html xmlns="http://www.w3.org/1999/xhtml";> 8 j& u6 D$ I2 E! O/ J4 j6 L
<head> + W l: W8 Z4 O) A4 C8 e( s
<meta http-equiv="Content-Type" c /> ! O! j+ t) y4 t: ]1 l0 H8 k
<title>css2.0 VS ie</title> 7 c; A$ W+ Y0 V) k: A* k/ V2 f0 `/ k
<style type="text/css">
6 i/ a( _1 ?; [, h/ M" I# |. v( ]<!--
- v7 V1 B% P- H+ V! P0 D( Bbody {
: W2 H F% d( `2 O* J9 @0 `font-size: 12px;
: ]7 K2 L4 {8 O4 F1 Ntext-align: center;
: r' O1 G, u) m8 N# m5 cmargin: 0px;
8 X b- L* G& {padding: 0px;
' r' _) A1 W5 M1 e}
2 [6 Q8 Z+ c) y% n#pic{
/ e0 ~) L5 L# d0 o$ \- ~ margin:0 auto; 1 i K1 }% k" [- X' P
width:800px; & i0 Y/ k; y1 |# G: i/ h
padding:0; " d# ~2 q! n" c& K+ |% ^
border:1px solid #333; ) @( z8 p, c- ^% F# \" M3 a
}
5 r U* J% F# x) c( [9 D' M2 r#pic img{ & @" p: ~+ w, ? a' `$ ?
max-width:780px; 0 ^( m# ]; ^9 A' b' V" V$ U
width:expression(document.body.clientWidth > 780? "780px": "auto" ); $ Y* e& R' s: R* g7 n1 L; L
border:1px dashed #000; 4 f4 ~1 A# t4 x0 a
} 3 ^0 k8 b$ U( W7 v1 S, b [
--> 0 F, N9 `+ V' q
</style>
! r" Z0 l6 L% ^; o! H X. I</head>
8 B# z' O- u% ~<body>
& M9 |8 L0 s' d |. k" d# H<div id="pic"> : l8 K, J: Q% Q$ f
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 H6 D+ ]+ ]8 v: o9 H( ]
</div>
- \- v# V! K1 B. I0 B</body> 8 i: K& y' `0 z7 A' O- Z) w
</html> : D/ U+ }) h% s4 j
% g1 l$ [5 R) U7 F2 @. C) z& Z+ [! B百分比适应:$ p4 S8 y5 F; i
以下是引用片段：6 \( T- s( }/ c% U5 @) e! q7 q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 w6 I; _2 A1 V* V
<html xmlns="http://www.w3.org/1999/xhtml";> ' B; i. m1 ~- P* S1 e
<head>
% k4 N s# b. G) R<meta http-equiv="Content-Type" c />
9 Q( {) N9 ]1 [2 B<title>css2.0 VS ie</title>
6 b* V3 a# M( z6 r6 x0 E6 A<style type="text/css">
1 _3 E9 S' o2 I" h* @. \<!-- 4 I0 S$ b; U! t& Z6 E C. n- Q
body {
) r) q# i- l! k$ o2 tfont-size: 12px; 8 r E/ |, t/ C6 N+ B$ I1 i
text-align: center; ; R9 g4 g- N# E8 c+ w
margin: 0px; # o% @+ m4 K2 e) W
padding: 0px;
$ T+ I8 r( m; ]9 g z( a9 s# {} : `! x \: o# B5 }) R
#pic{
7 v7 O' w! B2 f* v margin:0 auto; 3 D% p2 H8 d/ R* ^
width:800px;
" B# h$ ~+ p- |: r. K6 u6 j padding:0; 5 O* j1 g; r: ^
border:1px solid #333;
! ^9 @+ o/ Z1 S: S- d; e& S8 G5 } } ( R2 O$ c7 x8 O! j: @
#pic img{ 0 V" Q1 M+ f/ \. h& ]3 D
max-width:780px;
}, V5 ~7 e, M! O1 O3 \) fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); / W! I: |& F; ?! O4 d) O
border:1px dashed #000;
. `% C' A* u: N$ s} 6 k q! }$ V I$ G5 o5 ]2 V, O
--> " l# }1 C5 m6 w9 ^) |6 ~
</style> , g V7 O: r0 U+ N l
</head> % ]9 ?/ D0 n& N: w; ^( X
<body> ; w# C; \! P( p4 K
<div id="pic">
: J7 s+ w, q2 y1 s& E<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 ?* l- o* ?* M2 S& | H# w</div> $ p |0 K' z$ C% d
</body> + ~' n8 @7 [. G ~5 k
</html> |
|
发表于 2007-12-8 14:55
| 