|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14367
- 金币
- 2469
- 威望
- 1647
- 贡献
- 1417
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ R% _0 o- n/ B t4 k' o关键在于：max-width:780px;以及下面那行。
6 D6 }, l+ {6 ~- J0 l固定像素适应:
* m, E- V+ Z- V5 g+ O# j
7 z' z8 B; c* a- Rdotted; 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> 以下是引用片段：1 ?; N9 X7 u' {+ M& b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 x5 l/ ^6 Y- x9 \0 H$ j1 v( R
<html xmlns="http://www.w3.org/1999/xhtml";> 7 E* i ], Y% p6 I/ `' L+ l) [
<head>
& v" C9 U( N5 h<meta http-equiv="Content-Type" c /> 3 q; ?. Z- P+ o- R/ U V
<title>css2.0 VS ie</title>
3 W4 `9 d' z t% G- z7 w! m" [<style type="text/css"> ) p3 E& k- G z J3 B
<!-- 6 a( q* u0 s9 a
body {
! G/ q0 n! E) V3 G' U- U, Sfont-size: 12px; 3 s- i0 D- R7 K! T
text-align: center; 7 X: L7 I4 `7 O& q& C* a
margin: 0px;
) }; Q1 O- w. _. ^padding: 0px;
' @9 y$ t: x0 r! i* ^! i& U}
; U! x& _) O1 E7 v) V1 |# r#pic{
! c& h( c) N: v! ] margin:0 auto; $ t$ i3 L) `+ Q) ~& }
width:800px;
+ B4 u( R+ |0 y* | padding:0; " w2 F0 c. j- ` d7 S6 Y) C6 p) l% I
border:1px solid #333;
) A4 t6 p& L6 r }
/ e/ R( B' R1 ]1 V, y! U% N#pic img{
7 R3 C7 [, C, w; G) l3 ~ [' h max-width:780px;
; s4 M, I" s( {% p4 O& E7 Vwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); % \. C$ j) O. C, F- \0 F
border:1px dashed #000; # Z$ O& Q4 @" X# x
} " H: X, o4 ]+ @& g
-->
A! f7 N [1 |1 l* m6 I</style> $ B/ }3 z$ C: z! s
</head>
7 w* d9 t5 D0 H4 |' q* E<body>
& f4 |7 K- @6 d) m9 G<div id="pic">
+ G2 g* G" i! @5 X7 T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 U: [9 L3 r) Y: O& |
</div> * s+ m* ]5 J! n
</body>
) X( l. \+ x) t% t. j4 M</html>
2 |# D; p& I/ O" `9 R3 V
# q' v7 D& s( D6 |7 ~" G8 X) l# r百分比适应:" O% |5 Y0 l+ d/ J
以下是引用片段：3 z- @2 Z) X7 F' f& J+ V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ w4 V0 m' N; n1 E" Y<html xmlns="http://www.w3.org/1999/xhtml";>
" f; b; a7 I9 S f3 P" R) L<head> $ `6 P/ H) `1 u# j: p( i( @
<meta http-equiv="Content-Type" c />
1 G. ]0 M2 C" e1 r<title>css2.0 VS ie</title> ! b" B5 n. }* r- ]9 ^
<style type="text/css">
" K$ P- Z& s6 e& p# f- n# ]<!-- ( w0 Y4 y; w1 k ~4 D
body {
E- b$ N9 W1 j+ e6 n+ X4 xfont-size: 12px;
; J7 ~2 n5 H5 T: F( W( F8 E# ltext-align: center; & d* T9 E" h2 b C
margin: 0px;
* L: w1 F; o6 m+ s ipadding: 0px; 7 e3 _* s' a+ P
} 4 N9 F) K: {; q; i) g
#pic{
7 h4 X' K' q( z margin:0 auto; 4 ?- Q0 F7 }5 H+ A5 O
width:800px;
5 w) o) Y8 v: M" n padding:0; 6 {" u/ e8 V; W, g% `8 E$ G* K. H
border:1px solid #333; # N6 l+ K' y# h& C; m
} : B* T5 G4 [; r4 {
#pic img{ 1 [1 r: {3 b% t G4 v
max-width:780px;
5 g: S, I7 A' y/ Kwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 T2 f. X* Y/ e8 h$ M% vborder:1px dashed #000;
( `! z3 v9 K% s& a& b8 q}
3 @5 K7 t! K- }7 K0 Y! z! I! o! @--> $ R a. e9 u" a# K
</style> ) Z3 N' h9 q K/ o$ x |6 x4 Z
</head>
+ L- a0 B5 d! R- Z<body> ! u1 E, U' U) O6 K( k. m
<div id="pic"> L, b' ], w6 J1 X+ f" o) ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 ]& G2 ]7 L7 A( c0 R1 @</div> # n6 t8 i. V$ x! K$ Y5 [/ g
</body> , O9 e- h% f% n
</html> |
|
发表于 2007-12-8 14:55
| 