|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 ~8 N a+ x6 v! ?关键在于：max-width:780px;以及下面那行。! f. F6 k7 `/ z3 O2 e0 v
固定像素适应:
: l% Z3 M( U$ n$ ]* W
" s) a: T: |/ i4 W; h/ S; Cdotted; 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> 以下是引用片段：
; e; R$ T( o$ P" H7 [4 a) W<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* O9 }3 n% n. ^$ L4 _, {/ c<html xmlns="http://www.w3.org/1999/xhtml";>
9 b8 b4 n" h+ A* X% N2 e! [<head>
2 ]: q% i) e+ m<meta http-equiv="Content-Type" c />
G0 Y4 B. n$ I. v3 y/ N<title>css2.0 VS ie</title>
. X' l: \- ~9 u, J$ h3 G! a<style type="text/css"> ! V0 P# ]5 D( j
<!--
l0 E0 ?3 y) o. ]4 hbody {
/ X, A! M* Q' a; D8 y0 |font-size: 12px;
# h, Z/ Q/ G+ N% [2 m" i8 Xtext-align: center;
6 ~' {9 t h B/ J3 T* U' }. Pmargin: 0px; % b; j& s# \7 M% b: v( l8 @ b8 V
padding: 0px;
9 K9 X5 p5 t0 {" n( g6 a}
/ C/ M6 H* r4 |! o4 E4 n2 e) F8 Q#pic{ - I& ~8 P$ h& r% z1 J
margin:0 auto; 5 T2 ]; E5 K( E/ W1 I
width:800px;
' G: @& A6 z5 X) T9 l padding:0;
) a ~* q! n! B, I8 k! m border:1px solid #333; & ]3 b( q& e+ o5 a
}
4 d4 j; S& h; c) u#pic img{
8 D' e7 T6 S# U, X max-width:780px; , a' e& N/ \" o4 t$ l- D
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 Z- @2 x. P+ g' k/ a
border:1px dashed #000;
7 B6 e# \ Y" X" A, I} / }# Q+ h' \5 t0 _
--> 6 E) Y: a0 v9 f9 j H
</style> ( o3 V) h0 o! j, O) ]5 `* g
</head> " K4 j- C1 V) G2 |$ ^7 P3 U2 d" z' A
<body> " s6 V8 \4 I% P% m L1 Q
<div id="pic"> 6 k4 n/ v' k( H' l: I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % r" j. S. ]) t h; y H
</div> # {$ s8 D+ T- I1 Z( b6 D
</body>
4 F J# M+ ~, R0 f0 T</html> 7 y- e: G0 j( B( q1 u& g) i! g1 v# ]
: A0 C( }4 X+ X# q, d% V) B! m
百分比适应:& c$ G& c3 p1 F4 w2 x7 ]
以下是引用片段：
7 r% j4 O+ |, g# k3 R: w; j: v<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 |4 f& A C4 G% F
<html xmlns="http://www.w3.org/1999/xhtml";>
) z0 s) |# h/ l% v% T; N1 n: b3 P<head> , T$ ~ p! x" f* f/ }
<meta http-equiv="Content-Type" c />
" i5 j& Y+ n+ f- ?1 ?+ K<title>css2.0 VS ie</title>
9 V7 k& N6 T/ _3 Y<style type="text/css">
) D+ o" |- H- ~: `<!-- ) I6 Z0 m+ b& m5 D
body {
3 ^' J4 W, H5 }, a) n( ~4 qfont-size: 12px; : S- t% M7 D9 [0 w! |
text-align: center;
# }" [, Y7 \( j+ m( i5 w6 ~9 K' Wmargin: 0px; 5 H# Q0 w: H. H, } r, L
padding: 0px;
) z! ~' O$ n+ O, T1 p+ B9 Z} 2 J. e W! Y$ x. U8 |3 O
#pic{
- f3 H1 h y7 r$ m" C- p margin:0 auto; * R3 |0 P4 d+ P' V6 w% ?
width:800px;
/ l: z R6 e2 t K6 q9 H padding:0; 4 H# t/ ^9 @. ~8 W) m3 Z# s
border:1px solid #333; % o0 A8 M9 x9 {. ^7 x3 Z- D( i- L
}
( E$ N8 q/ {1 c/ p S Y$ r#pic img{
+ e2 g, H" Q4 Q6 d+ \9 |( ^ max-width:780px; 5 s' Y) T. l% i: V
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " h9 r; l. E, E7 j- w3 \' [% R
border:1px dashed #000; 3 F) V+ h! B7 \& p r6 R
}
; b' c' [5 s1 B3 d. d--> # {8 V0 Y2 v& Y, V! [+ e
</style> + g8 B+ u: S# j2 {2 y1 a- Z3 u
</head>
3 {8 f: }6 y5 w8 Y* O<body>
, h- \+ `. D1 I- g; e<div id="pic">
, Y) q8 T4 q3 ^1 Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 w2 X$ j7 c1 a* f</div> ! D4 f1 n: y$ r& h
</body>
/ A( }7 C6 |1 z6 @4 t</html> |
|
发表于 2007-12-8 14:55
| 