|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 P& S- H3 a: A3 A: l
关键在于：max-width:780px;以及下面那行。
( k& T/ K: s$ U( s6 l; t! r4 z固定像素适应:
* ~# z5 I$ ^: k2 Z
9 @; H1 V: X' {% t' G y: E: 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> 以下是引用片段：
; b- U) M+ P* F, M- X' s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 `" w- V& V8 z/ B
<html xmlns="http://www.w3.org/1999/xhtml";>
% Z8 X- V& U' W8 b$ k: ?<head>
3 Y) A% A5 G, q. U5 A, ^2 q2 k<meta http-equiv="Content-Type" c />
4 b1 a$ ~! ]1 s/ N% `, D<title>css2.0 VS ie</title> 8 n6 G; K7 w) P" Z% Y
<style type="text/css"> - H( F! @- e; ^
<!-- ) Q/ g1 f+ A$ y3 \/ c' E
body { , t- G/ B& p, [2 m9 D3 w
font-size: 12px;
, P2 }8 X; b' _text-align: center;
5 T7 g. q! W* c: m0 |5 I$ q( f( Ymargin: 0px; , b/ i5 N5 ]% [4 I" B
padding: 0px; ( b, R0 `0 I' |0 |9 O
} & W B8 |% n+ Z1 U8 g
#pic{ # U$ F1 Y% d9 D+ L( H8 }) B0 F
margin:0 auto; 6 D6 w5 z6 s( c$ p, E+ H# a8 r
width:800px; 7 I& [. S) N% m( }
padding:0; ) g3 K* l. | N& G) A0 h- A, U
border:1px solid #333;
% m5 A5 Q3 k- R/ R } E+ k; ~/ w5 D; s/ E
#pic img{
# r: R* u8 q1 [5 |# n: w max-width:780px; 1 R7 Y4 j. m) n. W( U1 _, |
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 b3 ~4 o+ N5 ?! o3 s. L
border:1px dashed #000; ( s% s# R& s% o
} 6 a6 a. a) n, u, _
--> $ z2 D" T0 \) f0 S' Q
</style>
/ P1 ]' O5 t$ W+ ?, c& n( L! d% E `</head> ( a, Y$ l4 h0 `. j) ~2 j, D
<body>
! G4 }# g% f- D6 u/ M<div id="pic"> y+ L- o+ s/ S* ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 s5 k) E. Q3 {( G( ~. j
</div>
$ Q+ K8 s3 O8 E</body> ( r3 b/ m: h$ U) R& j
</html>
$ u$ K. ]5 r# f/ z1 ]' D( ^# H9 k J. s& m+ z
百分比适应: A1 L' M+ j3 G% |5 d
以下是引用片段：7 z; W- `4 z+ s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 R$ K/ X- W' Y. N<html xmlns="http://www.w3.org/1999/xhtml";>
2 f7 C( T5 d! ] L2 X<head> 9 ?: G+ A h3 M8 u" Q; F
<meta http-equiv="Content-Type" c />
! @* x1 B. M0 T<title>css2.0 VS ie</title> ) v O0 b; c$ G `7 G) V% m
<style type="text/css"> : F" s# Q& I$ Z% r5 m9 G
<!-- 9 w$ W- d* j9 N9 X7 z# }# R2 \
body { 3 _: a5 Z+ Z' k# P7 V5 d9 Z+ q
font-size: 12px; / A) m) Z/ |2 e! y2 P9 y" u
text-align: center;
6 d5 V7 M* [' a: V& bmargin: 0px; & q0 v( i5 J" u9 d0 ]. x0 M
padding: 0px; . j/ H7 V9 i1 f- ` g) t
}
8 T* G1 T: v2 q: b#pic{ : A1 A( h. j' E* t( o3 r6 ]2 `/ v
margin:0 auto;
: g: i1 J* F4 q width:800px;
/ `- |: I$ f$ y+ U% C: e; h2 @ padding:0; + Z e8 t8 h1 }$ j
border:1px solid #333; ) I7 w( {. K5 q
} 1 v- d3 X9 m) R
#pic img{
+ P, w* c7 N( X! q! p* X+ a max-width:780px;
" e. V, V* `" F# e+ r" o; `width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) u) Z. ~+ q# V' I9 l3 U6 aborder:1px dashed #000; # E9 H( T3 C- J" ^- H+ W
}
5 l# G& f/ N# ?--> - ~! W$ H2 T1 e7 B3 q9 s$ ]3 ~2 ^
</style> : w$ T8 X4 G, L! ~0 Z3 P1 z
</head> 6 F3 g6 F2 Z. @
<body>
; v: `% L6 e* P& s<div id="pic">
8 i7 _# ~+ x" n6 l7 K8 {' o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 l5 Q( E1 E$ _- f
</div> 1 E+ g* l8 a. C: s! f7 j
</body>
8 y6 M e/ F. {8 w</html> |
|
发表于 2007-12-8 14:55
| 