|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 ?! s- s" [! I9 b( O5 w$ G关键在于：max-width:780px;以及下面那行。6 c& S [1 o3 }$ V" F% j
固定像素适应:, `/ Y, _7 X! } v' ~
0 i( l/ V0 J. D! Udotted; 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> 以下是引用片段：
, a) i5 |# n8 K4 [" Y! s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ K) i+ M( w! N/ J, N3 i7 r0 P<html xmlns="http://www.w3.org/1999/xhtml";>
% G: N" W6 h; y m/ W2 ?$ F<head>
- ] K* L4 t% z8 G( L- h<meta http-equiv="Content-Type" c />
9 E( I3 o* `7 h+ o' J4 E& |<title>css2.0 VS ie</title>
; G- x. `$ b# T5 i) W<style type="text/css"> " [; v3 u+ p+ O! g8 b5 E* p
<!--
; A8 b. y9 B1 p0 d' Q( `8 Zbody {
" G1 L a( J) l* o; v- U' p/ r Z0 qfont-size: 12px; 0 \2 y3 r7 m- v$ O4 q9 V
text-align: center; 9 I$ v9 w: C9 _ v' t, B. W
margin: 0px; 9 l9 ^9 {0 f5 G1 S6 d
padding: 0px;
: i6 V# g1 T* _$ x1 D! J u} 9 e+ Y/ s+ x' C* t, ^
#pic{ 1 ]: _+ x3 z N7 d! u% y3 o# K/ c
margin:0 auto;
' ^6 i' L: V z$ Q; ?0 ` width:800px;
( `' n+ l- L; f, v padding:0; 8 Y! U) M2 k) g2 v& W: r# O8 k
border:1px solid #333; 8 n- U9 n; L6 k' P1 G3 |5 ^
}
* L0 E+ J. K; ]8 W% M: {' E#pic img{
% s$ a+ q7 N% n Z B: \$ x max-width:780px; . I5 o! V2 r# \0 M8 L/ P
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! X1 {( J) T8 B/ k8 @. gborder:1px dashed #000;
4 z; u* L( E. A7 O/ {$ h- V% Y}
* \1 A+ h( M5 U4 O, N t. F7 N5 ^5 e-->
- R' q* @: I5 @- {( b4 i) x4 \$ e</style>
% W0 s" x) ^- W</head>
/ U) Z8 x, D) Q+ v/ D<body>
2 Q# w1 R+ l, {9 U- a& `2 |; ~<div id="pic">
: G) S1 G3 f: P y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 x, _% x5 V, l' J# j+ n1 `. q
</div> f/ n+ P6 w( n: J
</body>
: Z1 t: u/ P" d. x) X5 e- l! r</html>
4 O4 L, N7 @2 Q7 u$ [8 C" \6 C# S2 l
百分比适应:
7 E4 o3 n! W1 n6 x) I以下是引用片段：
) A+ {# F: D. N( K2 W<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# c& K0 E- f, B) i5 T4 D& c<html xmlns="http://www.w3.org/1999/xhtml";> 7 [7 x1 d+ @2 \
<head>
* S" k. W: d/ Z3 i7 ~<meta http-equiv="Content-Type" c /> 9 r6 C5 V Q) v9 H" [
<title>css2.0 VS ie</title>
0 I; a# ]5 U- ^9 e3 R) n a<style type="text/css"> / g* Y/ S p& f
<!-- 1 |; z1 N T% y8 m
body {
9 q) R; ~; }1 o3 hfont-size: 12px; 2 r/ n' M8 Q) y" i+ Q
text-align: center; " a+ I4 t- M, {3 T: l: {5 ?
margin: 0px; 6 w7 |8 G, s+ C$ m6 a- s3 v
padding: 0px;
5 U0 f, k: |" |8 d% Y}
2 |8 f ?, r1 n8 O' x( K+ }#pic{
' H0 e4 k h" @$ o! u- b margin:0 auto;
% X/ b8 q6 Q0 z$ r2 k0 k& Q width:800px; + W6 o- {; l$ \
padding:0; + T- _8 S/ A$ d9 N! I! ]$ n
border:1px solid #333; $ P6 w' B; S+ R# x0 a! Y
}
; G% K, \, R7 o# J' R, J5 i#pic img{ # _2 Y# }( a! J; ~# ?( e# V `6 x
max-width:780px; ) j& l, g5 J9 A3 G; o! C7 y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : E5 m3 \6 Q0 k1 O7 _5 Q. R' f7 o
border:1px dashed #000; 5 f8 E5 {8 J& _' w$ N: K7 N* Z0 D
}
% t" G: G9 H! C5 P p+ e/ l( _-->
% o n v- V1 R1 i/ n$ a: z</style>
9 b: B9 B/ L2 O# p</head>
* ?7 ~1 [+ N% h# Z% S% x# ]+ {<body>
0 @! a" ]" W; U) F<div id="pic"> , F2 m# f( [6 V+ z3 H- C( M3 m
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> }0 \* ]( S2 R& S+ W: |. P
</div>
4 W" D+ S" G( }. W5 ?3 V0 u</body> + S! a: ^( B. G- h
</html> |
|
发表于 2007-12-8 14:55
| 