|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& E- u& b0 F$ q8 `关键在于：max-width:780px;以及下面那行。7 x. k u- {9 }" H
固定像素适应:5 A+ w9 H4 u3 W! T
: Z$ a( w6 M2 C' 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> 以下是引用片段：
- l* R E2 {1 @7 _) d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 k3 O2 k0 }* m: D3 W3 c' i<html xmlns="http://www.w3.org/1999/xhtml";> ; w. p! \4 O6 _- `' I s2 ]
<head> 6 E' Y1 u! w3 E% u" o8 x0 r+ O
<meta http-equiv="Content-Type" c />
% p5 _$ m- R+ O$ b' s3 b, J<title>css2.0 VS ie</title>
, [6 q2 {4 P* V8 Y2 A1 B9 d<style type="text/css"> ; ^" n5 e8 [2 C* h
<!-- ! l+ o3 b( C" {% T
body { . t% n2 ?0 r6 r) R
font-size: 12px;
( } `5 K* c( `- a! d5 E# o8 ]text-align: center; - l; s7 x) s3 S. S: f& @' g9 K H j
margin: 0px;
" [2 C1 L# d+ [; x4 A/ ypadding: 0px; 2 b% g4 l7 d+ Q4 q C9 N' p
}
) E8 m$ J& k& F+ m8 t# w#pic{ 7 Z. s# F) L9 f
margin:0 auto; ) n/ I$ [5 b: @- P
width:800px;
% b9 f$ S. X. e, A9 G6 [ padding:0;
1 J8 N2 s* P0 U border:1px solid #333; 2 u, b: T. N6 r; O2 m
}
4 b" s' ]$ e- x#pic img{
6 i9 _; d! L- V7 H; S+ w* i% Z max-width:780px;
& |- n3 i2 @0 X" M: z z+ j0 fwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
; M: p# ^0 \; M: w3 bborder:1px dashed #000; $ O1 C S5 n- Z. j6 p" B' O& {
} : s2 E, I( F3 J
--> 6 O3 a! K- ^0 c
</style>
: C3 Y! |5 b0 g8 X</head> + x6 }- w3 q4 w/ c
<body>
: g2 w4 r) K2 a% Z& r<div id="pic">
+ A2 d/ o5 W( F5 v<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 u7 d7 ^$ ~+ O c
</div> : x6 Y2 z% E6 ^5 `2 o
</body>
' V; J: ^" d1 @7 U. V7 O2 r</html> - u- e+ \6 A% Z
8 b( w, J0 r3 f4 j# g5 x百分比适应:
, Z& j' J1 j" F9 | m以下是引用片段：# U6 `, W- m2 N, m! u ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 R; z* }; h4 U" ~/ q
<html xmlns="http://www.w3.org/1999/xhtml";>
6 e. N l- \: Z6 ?) x<head> ; t) O$ ^, x/ s) k9 G% b
<meta http-equiv="Content-Type" c /> , x7 r9 z U, F7 o" {
<title>css2.0 VS ie</title> 7 p6 w; `2 ~( o9 l5 u7 Y) `) p
<style type="text/css"> : b6 x% w0 W3 F' u( U8 O' o4 a. a
<!-- 9 }/ e, I1 k( T
body {
' H2 y5 Z% c) v% C+ B Q' |font-size: 12px; " J ]3 p1 I3 Q9 A$ P6 f
text-align: center;
! Y) e+ c- y3 g3 b: |3 Lmargin: 0px;
X! X+ _% V1 C5 m/ n1 g7 cpadding: 0px;
f; K$ i5 [, Q! R' y& U}
4 G I: j4 O- G#pic{
, B! n) i2 x" j+ c5 ?' R margin:0 auto; $ O- B) O; p$ Z1 J0 E4 V
width:800px; & k* X4 L- L9 s7 O5 q9 U3 Y
padding:0;
0 `2 Y3 @7 @: ^# p0 q5 p9 D8 } border:1px solid #333; 7 b5 m& ~) d* X* b/ u# a6 Y* m
}
8 O' L$ L# I$ Y F0 V7 ~' _#pic img{ 1 b' u. e: L- U5 G
max-width:780px;
- a1 f+ c$ L. }8 }6 nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); % Z3 Y R0 h+ ~- x- \
border:1px dashed #000; 3 N$ v, ? k, B: u7 J- J& T8 Z
} , |8 P2 O; \9 ~' I7 b+ h' m3 @ k
-->
, @/ R# G8 ^% s) W( K: |+ i</style>
Q. E* H8 Q( V# `, T& d* S4 n4 f7 P</head>
: S: x: v# J9 R: z* V) l<body>
+ x5 t* b3 r5 z4 e& C<div id="pic"> 2 ^; D/ s. n& T0 C
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 f: A# \5 _. e5 H! f</div> 4 A6 b# V+ A% R3 |8 q7 b. X% z( }
</body>
5 `9 X% ^- _: N6 ]2 h</html> |
|
发表于 2007-12-8 14:55
| 