|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14161
- 金币
- 2371
- 威望
- 1647
- 贡献
- 1319
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" D/ C9 |: c7 @. j" ^( B关键在于：max-width:780px;以及下面那行。
0 P, a. |4 E' i固定像素适应:
3 f- f& \5 c J7 }( T3 r2 m; g$ Y7 E; e5 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> 以下是引用片段：
# m* M, [ }% |* r. e<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . Y$ v. U, p' x, o
<html xmlns="http://www.w3.org/1999/xhtml";>
M5 m2 L% [. y; H, K. y6 m<head>
" v1 ~& Z2 }* G: ~) g$ Z% t<meta http-equiv="Content-Type" c />
8 K5 ]! e4 j4 \. H<title>css2.0 VS ie</title>
7 G. S: ?8 |9 R( R! ?3 j' v: p<style type="text/css"> 0 D1 I7 `5 J L" y- j
<!-- ; w& w$ `' z: \( d! H0 }' B, b
body { ; I; |( ^; G. ^* D7 t
font-size: 12px;
+ z) B8 R7 q- k& S1 r0 }text-align: center;
; Y" {4 H7 M: C7 t1 r1 n* smargin: 0px; 1 \5 F f ?0 b% ^6 A- |3 j5 P) P# R
padding: 0px; . f, m ?7 g z8 u
}
{2 L( `9 W+ q4 i1 _0 i#pic{ ; \3 [- e5 O% ?9 @% b0 d- Y
margin:0 auto; " u+ e# R# Y7 w. f$ ]2 F. }
width:800px;
+ d Q' d1 c. o7 k% T' S! k padding:0;
4 t/ g/ w6 y4 d! _* |. \ border:1px solid #333; 5 }, I1 b5 y- w2 x0 Y
} - u+ a4 s! t( S" D. Z
#pic img{
4 `4 p, u4 N7 u max-width:780px;
# L# L% _1 Q" x; Awidth:expression(document.body.clientWidth > 780? "780px": "auto" );
2 |. Z6 H8 t! Xborder:1px dashed #000; 9 L( p0 d: n$ P% ]
}
- V/ g t+ Z- P* `-->
3 J3 c( n I5 U# M</style> 9 h! B3 A# z+ a; c' o X% e+ M7 X
</head> 1 z% M9 N5 J* A3 F8 o
<body> - Z' P( M, ?& n4 Z0 g
<div id="pic">
/ a, c! \& y8 f) j. s/ E6 b<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! B D6 n4 ?& Q5 e* i$ S, e" N9 k
</div> # d h' N. t: |8 y: J1 e
</body>
( }# |$ \# }8 i4 i7 x% j) u</html>
, t2 V0 _) o/ B; a7 r* W- t. k! W6 V3 }; g' y ^/ w
百分比适应:
e' J9 E/ x; g8 Y0 i8 X ~以下是引用片段：1 C/ ]9 k! o1 \1 l# p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; Z8 ?0 X+ y% N! C4 W
<html xmlns="http://www.w3.org/1999/xhtml";> 7 S3 X% ~: ?0 I& f5 W
<head>
& u' ]) j! ]: O; ]& L- f<meta http-equiv="Content-Type" c />
* [# O1 T; v- X3 Y. c4 e# ?* E7 @4 |<title>css2.0 VS ie</title> 2 |/ y2 J2 G' F b$ H
<style type="text/css"> 8 b6 \0 q! _4 a
<!-- 6 l \ Y C) M! P' b
body { % w4 h% c0 R$ L& ? |
font-size: 12px; ; J9 f5 W7 E4 G* k3 [# A$ J! ~& m! d1 u
text-align: center; ( N9 z+ B& [% B) {
margin: 0px;
, f" k) Q5 M5 O. E6 Npadding: 0px; 1 |) C, }( P$ a# j
}
, Q" f, Q& w: m) B: k5 o3 o) P#pic{
9 o$ Q& M/ `6 W. I6 J* z9 ?9 ~ margin:0 auto; 2 G1 l; I+ r" L5 f6 Z0 a4 m+ v* x
width:800px; ' x4 Y) Q" L5 U, ? Y
padding:0;
) I& l0 D; G3 B7 z: Z border:1px solid #333; * a2 H" ~8 c3 ^6 k9 z) t
}
% q4 Y% A6 A( ?#pic img{
- f3 N7 g) L$ r | max-width:780px;
* V' ?9 U0 a5 O1 i% ^width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
m( G8 f4 A/ cborder:1px dashed #000;
- V: V5 c5 L3 R2 q5 f} 7 j/ Q3 E2 t# ]
-->
# N7 N H$ l2 G C' T* E' p% C/ x</style>
* @+ }, `' m8 ~. f( I+ s/ L</head> # F, a6 F7 J$ W" `0 j
<body> 4 B1 p+ H0 q0 S7 w
<div id="pic">
% e( ~ L, T& ~( K: h<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
( b7 l ]6 j' t5 I2 v5 [</div>
3 Q& `( V4 p1 }) x% ]! f</body>
. F- p9 e) }/ z, [</html> |
|
发表于 2007-12-8 14:55
| 