|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" s8 F5 J: U) g% Y' j
关键在于：max-width:780px;以及下面那行。
( i: J7 n% B, _3 M# u" M2 T固定像素适应:
* |& G5 B* S( G2 v; F' \; F; k' {. u: S6 M- `8 s
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> 以下是引用片段：, |4 ^3 ~ ~: v/ Y! w7 q5 m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 N6 v3 @/ q; `+ m/ H" O
<html xmlns="http://www.w3.org/1999/xhtml";>
9 N/ K. L% d* r0 G/ o/ p<head> : w) d3 s4 X& ]) n# r8 v
<meta http-equiv="Content-Type" c />
& l. E( N) T4 B, h0 W<title>css2.0 VS ie</title>
' Z: B0 T5 c7 ^( j<style type="text/css">
9 j8 b: w) B$ e, L<!-- - T/ N" j+ @, Q7 m0 Y8 Y" B
body {
& a& O% ?2 c+ G1 vfont-size: 12px; ) m6 q' D/ \5 Z* h
text-align: center; & M) m5 x8 ` x0 h1 }) Q" F) a5 H; Y
margin: 0px;
6 v; {' s \5 ?& a/ ypadding: 0px;
, T ]: L! H: _; N3 {}
( g$ C( }# m# Z$ l* e, Y#pic{
- K4 s/ e4 ]! `: q6 H margin:0 auto;
# G# u, V7 W4 h: J: V! L' Z' [ width:800px;
' l& p: C: V: G c# i, P padding:0;
8 x& f3 [# @0 ^3 `( }. `; ^& s border:1px solid #333; 6 W0 ?" d+ S+ s
}
0 T# \% i4 L. A, R. e# ~4 B% t+ T( }#pic img{
, _) F5 @# Z7 {) L: o {1 W: m$ z max-width:780px; 6 i3 q; |! c* e
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 J& p7 ^% _7 ^/ H& w1 J* ~! y
border:1px dashed #000;
) d3 P& I7 P* p' T l6 T}
. |' O; x2 z. J% W0 E+ f-->
) r$ ^5 }% }2 V+ K: \</style>
* C- e3 l& g" ?- }4 ?* N7 S, a</head> 8 Q" N0 ]' K1 o8 X, z' t* {- w
<body> " y8 y3 a8 f4 l3 C. L: m# F. [
<div id="pic"> % ]" K2 ~6 Z3 n7 e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 R! K: e% U4 J. e</div>
7 g6 G9 n- _# ~# K3 p& Y</body>
! W) d1 Q6 q& B" l. M; s% c& h</html> 1 {& f) _4 @' R- ]2 B2 D C% C
: ]' ^) f+ A, A4 D) `1 }& s: C; ?: V百分比适应:* f) n E3 t, D6 v0 V I1 B
以下是引用片段：
( K( }7 \4 T, @' K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ d! F7 S: b$ e1 X<html xmlns="http://www.w3.org/1999/xhtml";>
) N4 f0 ^- {* I6 M" U- b: Q<head>
$ B( V0 H& V. O& i) G% c<meta http-equiv="Content-Type" c /> " f" C/ b/ F2 A+ H3 ~; m) ?' q- d
<title>css2.0 VS ie</title>
$ Q! w/ c- J" M t+ b* s<style type="text/css"> - K5 M, [6 A# V$ V# Y
<!--
0 \8 c" {/ r8 sbody {
0 a/ d( z. h4 ?4 j. g( {font-size: 12px; 3 V4 r5 e* N4 p; v% y$ K5 G% E
text-align: center; 8 p1 ?7 A6 W# H: B# u- r( w! Q
margin: 0px;
1 }. o; k% q- O) i7 [$ M# hpadding: 0px;
7 N7 p$ A; v2 |' p3 ^8 b}
7 U/ Q2 W4 v* j#pic{
: y5 h1 o* y2 t1 `3 j margin:0 auto;
# m# W. e: M3 l% V8 f0 f width:800px;
: o) `6 d" N8 H! g& u padding:0; / D4 f9 Q2 u. ] V. }3 p& u
border:1px solid #333;
2 G( B" L" b! h I* m3 h. Y } ! ^' |+ `, x1 h0 \9 l& I( T
#pic img{
V. g9 M& O9 ~4 V6 h" P max-width:780px; & D, L% c6 {$ b4 e. I8 c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ; m2 y) p4 c3 Q. G! O4 p
border:1px dashed #000; * e: H% x0 w7 Z. h8 u
} 6 ^& _8 |( x8 X! c
--> Y v1 R/ ~, W5 V
</style> & {' V! |! G% U5 b9 f. n/ n# s: }: C
</head> ' H9 k1 _# e( |4 p x$ V
<body>
9 k, i1 w. c' v- Q<div id="pic"> $ Y, y, h7 T$ `( j) F
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( C0 o& ~& l! x- j2 ^0 J
</div> ' W: K7 q/ h( r. G4 x a! W
</body> % S; V% o: T: M, q
</html> |
|
发表于 2007-12-8 14:55
| 