|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' c- K `7 q$ m3 x- Q. R# p关键在于：max-width:780px;以及下面那行。
2 E/ m" P, |5 f8 v* k/ b K0 `: X固定像素适应:
E# f$ P3 z* ?( l+ x. L7 W# s1 f4 P9 k2 B V8 }
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> 以下是引用片段：+ T& a' G) U! \! p; f8 t+ b _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, o4 j. ^: B/ _) X) ~<html xmlns="http://www.w3.org/1999/xhtml";> 5 f' u8 D3 T: V+ Z
<head>
. ^ G O1 v# C B+ P6 t<meta http-equiv="Content-Type" c /> # _ r3 [% ]. b5 w, j
<title>css2.0 VS ie</title>
% r- q3 e# l' F' }& V" ]$ L<style type="text/css">
, {3 P3 M% E1 L! C<!--
5 G5 y) f; N cbody { 8 ~) w0 k" x6 _' j
font-size: 12px;
" @5 ^7 H" W$ W7 N/ D& ]2 Z* ftext-align: center; * Z8 y3 L, G) w: C& b4 v& t
margin: 0px;
$ o9 r7 [ p8 P8 g! mpadding: 0px;
- j9 s* ^; {0 ~ k} 8 ^5 B4 s& ], P
#pic{ . I$ B" b$ u- {* Q! g M0 i( @) l
margin:0 auto;
; f* ^" h- m9 m, Z7 C/ N width:800px; # u8 h9 l* N E. T G! m
padding:0; 4 a3 h! D# ] @0 K# f: d0 i
border:1px solid #333; 7 |& U: J" O4 D4 O5 D2 [7 O7 w8 y
} $ P, R" o8 V& G7 Z0 k
#pic img{
% O! J- r; B' v7 h; S( R# Q max-width:780px;
" ^% ]6 D( g4 e( X" p! Pwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 o) h, \" [* |) uborder:1px dashed #000; 5 i6 L8 Q: ]! B1 H8 |# m+ J
}
5 Z3 H! o, p( H-->
0 K3 [! }0 B- a$ {0 Z0 W</style>
7 [! j; V3 Y2 E2 H3 K! A: u</head> T+ m, w1 `+ R) E9 `3 @
<body>
+ d% w3 a9 _. p. f9 J<div id="pic">
3 c! r6 M* I( N<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 M, t1 v' y' T. Q9 G
</div>
7 K* z6 O L: G% V' j</body>
: L& d$ [" k5 B. ^, L r</html> + o6 w4 i( }! M& G: g4 M+ X8 M) {
% P% Y' e+ Y- F- m
百分比适应:, L, h# b& i5 H& `: S3 l" N% E- G
以下是引用片段：" t, {- ]& d) {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 d8 o+ r4 [6 G) P<html xmlns="http://www.w3.org/1999/xhtml";> 1 l+ b1 t! I( V- O; o7 d
<head>
" `$ v! K$ @- b4 r- @* \<meta http-equiv="Content-Type" c /> & K* d5 O6 a2 O( D" Z; S$ [ w' R
<title>css2.0 VS ie</title>
/ s' \* v+ ^* w" a( U, a! @$ P<style type="text/css"> / D' c5 \* m4 |! P) t3 R7 P
<!-- $ Y& _1 T( a5 D4 @
body {
2 r( _6 j+ I- Y. X) \font-size: 12px; 3 y+ d- ]* y* y) ?. w4 j" l
text-align: center;
: k, z; s' G( n( |1 W' l& N k3 \margin: 0px; % J0 W+ a$ x% F! {# h+ u' C8 J- }
padding: 0px;
5 y. L& d! U& k} / _' ` V, ^' t* q! J
#pic{ / _2 G$ V1 t6 }) p; @4 g% _* T
margin:0 auto;
1 ?; \. r# g3 I- J( v: z# B9 B width:800px;
5 q5 x; y' L7 v2 L! m* O padding:0;
2 z, L" q/ S) ?& C7 P$ J border:1px solid #333;
6 y$ ]( O0 e9 K+ U; C }
1 h/ _! l3 @9 j9 X; x5 v. t#pic img{ 6 |5 x. k4 b O& y& r$ w
max-width:780px;
: c) q& q+ B$ u6 [$ Ywidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 @) ~1 L$ C7 A, dborder:1px dashed #000;
; [0 V1 f6 ~8 J# C: d! E}
" [& u$ O+ j' d" r! F& g7 i-->
1 J2 L* i; t9 e) a$ H</style>
+ ?* A( R# C1 ], O</head> % r4 l& z5 j3 M- F/ r5 [5 t
<body>
8 ?1 }8 F4 m* ?<div id="pic">
; [6 t X! o- w/ I! _+ v, L$ n<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 u6 X4 f5 j$ b- i</div> # F$ L8 ?1 ]. r- W0 Z& L* y" t
</body>
* m0 r8 F/ o; y8 f</html> |
|
发表于 2007-12-8 14:55
| 