|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# c& p. A) f7 r; e4 u) Q关键在于：max-width:780px;以及下面那行。
* [" c1 x( I0 O% F固定像素适应:
' N! H9 F! e. Z5 {' z1 q& U [0 u& y0 I: _2 _5 [ c, V R8 ?
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> 以下是引用片段：/ X6 M/ a/ b5 C6 e4 B" b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 h0 ?. ~& c7 w1 W( e
<html xmlns="http://www.w3.org/1999/xhtml";> . `: f: N& K* i
<head>
1 W/ b9 F0 |' l& ]<meta http-equiv="Content-Type" c />
) |- A3 c( ]: P1 n) z4 v! a5 d5 g<title>css2.0 VS ie</title> % H( P( n9 S5 r# N: j$ E3 }
<style type="text/css"> / [0 ` S Q( I8 w
<!-- 9 v* Z+ ?! W. y
body {
4 X0 u0 E- I( G! q0 J5 xfont-size: 12px; * l7 V3 u0 `+ L1 b
text-align: center; ( F: h) y D2 H
margin: 0px; # T; S" b) v; ] B
padding: 0px;
7 H4 H2 D* }- v5 L3 o5 _5 _} & n0 e5 F- B7 i. b" q# Z5 k3 h
#pic{
& o& l, @# R5 ] ?, C. l margin:0 auto; % L, [( R8 V) k/ O
width:800px;
9 ~6 x/ M/ }" c: E9 A4 G# [ padding:0; ! i. c( T9 l1 T a: s& K
border:1px solid #333;
8 \$ @: V2 E; X% K6 R } 7 I, V$ ~! Q# w
#pic img{ , |! m' `0 I* ~ T
max-width:780px;
5 F0 e: ?# P! Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
3 k e# Z9 w6 C5 F2 Lborder:1px dashed #000;
8 b5 N1 w q; u6 W8 m3 F}
/ k* ~# h: i9 c l$ \: J/ o--> ]8 P; h, v C0 c/ Z1 r# K
</style> 5 R3 h/ F2 h) j( h9 n8 }: ?. N7 F
</head>
, c9 j+ w) s% J* ~6 J<body> # k8 b# _! C/ _! w! t
<div id="pic"> 9 |/ }5 U- Z: }2 H: }; M! |
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; f# ]- i* \* f</div> - d. O: q7 u! j9 h" C- W3 S X! l6 X
</body> 3 b+ A0 ?5 D( ^7 A# R
</html>
4 A2 b+ ^2 j9 s8 \; H; |: u! o( ^+ R/ \: L
百分比适应:& d1 Z% Y3 L4 r2 R6 v0 E Q
以下是引用片段：0 ^5 M5 c$ [6 F Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 t+ H; B1 g, Z# U( X<html xmlns="http://www.w3.org/1999/xhtml";> , I% ?3 ^: R/ V* |5 m6 c% T! {1 M
<head>
7 }6 Y0 @; Q9 z6 ^/ ?, ^ m<meta http-equiv="Content-Type" c /> 8 }4 n- }/ r8 G: G2 U2 R$ v
<title>css2.0 VS ie</title> - \; |9 D5 R) Q7 A e# P
<style type="text/css"> 4 i! U" e; Q" b! _
<!--
( V2 s' w! D' e3 X7 J3 C. Pbody {
, h$ M% e; i6 A) Z' @( h, p8 Dfont-size: 12px; ) z$ e6 r4 u$ e0 z5 q6 c) m0 _. \
text-align: center;
, s1 K! c4 i4 Xmargin: 0px; : S9 d# ^; l8 |. q; E1 I
padding: 0px; % S8 f* t0 C1 n" D2 ?9 Q
} 6 d# U: J6 }- b
#pic{ 0 P# |9 E' c B) Z
margin:0 auto; 3 {/ @# B- ?! N. C5 N; {
width:800px; 6 h3 i4 s% J; l8 U
padding:0; 6 L+ o4 E, r1 B }2 S1 c
border:1px solid #333;
/ D6 |1 q8 z# S! ?- [& s+ x }
: c( @% k; p' G8 R& {) e#pic img{
+ h" ^7 [& u8 D max-width:780px;
! k7 Y: J. t0 @" Mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - A; u3 G3 U$ _! k- }" I4 `6 s
border:1px dashed #000; & X; m# I+ w+ W; x! G
} ! a0 y1 w8 [5 k" D" a) o* g
--> ; `0 h& l. W+ s9 `1 g0 |. }) I
</style>
( W5 m; ~5 e1 C4 n5 A" k& K</head>
9 o/ s! w, Y8 J9 l<body> & @# K$ }1 a; N
<div id="pic"> ( g. V8 w& z9 S! q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" z* m. y5 n B</div> 3 F# C2 r3 E6 z9 U: C0 c p
</body> ' V/ J9 f/ f: f; M: W& }
</html> |
|
发表于 2007-12-8 14:55
| 