|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: U* Q8 n% U* W$ q) G9 A, v6 ]
关键在于：max-width:780px;以及下面那行。
! l, ^' V4 z4 G1 G! d固定像素适应:
$ X6 O- _% t L: ?! `) A; o5 x: g( o# S6 D5 V7 n' y. a* l" i0 K7 j
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> 以下是引用片段：' E% ?. c5 w0 T5 X+ h" B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 h8 S/ z" m3 {3 d<html xmlns="http://www.w3.org/1999/xhtml";> - u. ^8 n0 x5 n& x
<head>
3 \ R. ?4 J4 R* N' N8 j9 x) d<meta http-equiv="Content-Type" c /> - H: W+ _. G, L& k) t
<title>css2.0 VS ie</title>
- v9 n9 N+ _, y<style type="text/css"> . L( L* v6 g0 M0 w, M/ o
<!--
; {, H6 E f0 _, [4 cbody {
& [1 m8 B; q/ h) Bfont-size: 12px;
5 X, X6 M2 X. I6 ltext-align: center; % b4 M Q$ r0 g" e) U
margin: 0px; ' `! X2 K& f2 K
padding: 0px;
9 Y. b3 G& B4 i9 ]" q/ L}
. e9 a1 w2 Y4 U3 U4 k F! Y" i3 g#pic{ 3 \- J7 K/ k% n6 n9 V; G" o4 L* Y
margin:0 auto; u6 f% M0 u8 j: O, T. n, a
width:800px;
, H. s7 p- v- Y, \ padding:0;
4 Q$ P" ]" y7 t* v* u/ L border:1px solid #333; 4 ?0 L M" Y0 O
} - e4 x5 i1 i- w$ `5 z. H% l
#pic img{
! v- {# h% B1 a' v8 D. J" s% q max-width:780px;
( W% D9 @6 m* W0 R2 N; cwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
9 g! n; J2 ]7 W7 Rborder:1px dashed #000; & C; q% u3 v$ V3 c. J1 i/ w
}
, A+ y8 h8 \1 L9 X3 y, k* a-->
5 a( i- h+ j/ _/ e3 A( L; g4 Q</style> , A8 h: U9 C( L0 D9 M
</head> + W* u1 s* ^3 G1 ]) \; F# C8 G3 \
<body> 0 V7 d1 G" j% j. d4 |+ L
<div id="pic">
) d J8 f' p- _/ o6 L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" \6 E6 n! i( V5 B# M3 s1 d$ Z+ X</div> . S2 b/ `$ k G8 u
</body> . i" I; \, [# @1 X3 E* F
</html> + |. ?5 x4 d+ K
, s; d. e0 e! D B% R% L% H
百分比适应:
& o3 R# ]5 |8 z# I以下是引用片段：. [( j3 ~( R# i& s8 k- b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " ^/ N1 Y7 G @9 t" Y% ^
<html xmlns="http://www.w3.org/1999/xhtml";> # y8 L% ^/ Z( @8 g1 C# T- Y
<head> + s, r/ a! d; Y, [4 G$ e) W
<meta http-equiv="Content-Type" c />
$ ]1 u- P! e1 y3 |( j6 m* z' x<title>css2.0 VS ie</title> / ?# V- ?( m5 m w$ c$ B }2 D- h
<style type="text/css"> - s2 T6 t* a, t; C& N
<!-- ' r6 N$ ?3 u! k. ]& w* g0 E
body { 7 j+ z" {- S3 P) k: V0 T5 z& B
font-size: 12px;
7 [, v) z2 `4 otext-align: center;
( S8 d" h% N' V/ r! l- M; dmargin: 0px;
- C @5 i: j( @. Y! H6 }7 ~$ hpadding: 0px; - u R7 M) o+ p2 }
} & d- P# n: d' g3 E+ W& d
#pic{ % F$ D- [% @$ }9 i4 g; I+ n) |! v/ c
margin:0 auto; & k; Y6 J' N. F0 J
width:800px; 9 @& }8 ]# o+ [4 c
padding:0; ! v, M& i5 i2 G) c/ {- k
border:1px solid #333; , S! s: q |" [) p: m" y6 g' f
}
, N. c7 `' F$ p7 Q+ l$ l#pic img{ , G( h, {) } Z: X
max-width:780px;
# k1 Q* D, g! c1 ?! R' F1 k* [" ~0 jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ( O3 b- u8 I6 w, U. Y( @ _
border:1px dashed #000; " N$ _$ c7 v( \$ M3 c+ z" a& g3 l
}
1 z- Q: c9 o7 x/ r! D--> : p' f2 k' |. a
</style> * Z( N5 g! J7 q3 H; C* _7 \( X6 e
</head> ; `; o, F! `2 @, u3 h0 f! y
<body>
' u' |7 v1 W w. s5 y& J ]<div id="pic">
; e7 y5 P+ \/ |7 Q+ m8 ^* G<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 Z1 s# ]7 j/ |# L
</div> 1 |& R7 ?' i5 d! T
</body>
; {' L; B+ ?9 m K+ l) f1 a) H</html> |
|
发表于 2007-12-8 14:55
| 