|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。4 D. y& z8 {; F5 s1 _# L8 K
关键在于：max-width:780px;以及下面那行。- h5 P: v: K: _( U2 l+ \+ ^5 A w
固定像素适应:
% F' N+ t0 V, @
& m( f1 o% O+ p5 Odotted; 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> 以下是引用片段：
% ?0 w4 `' o9 ~+ d0 O<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 v4 g7 {6 ^7 S* P; K. i/ E6 [
<html xmlns="http://www.w3.org/1999/xhtml";>
2 i f6 E( |; Q<head> 9 P1 q$ S+ a# i2 G8 R/ @& z: n
<meta http-equiv="Content-Type" c /> 2 [( b/ }3 y& O# e1 B
<title>css2.0 VS ie</title> ( p. g7 W8 S! A+ ^$ F C* t
<style type="text/css"> ( ^0 Z& x, z% l* m
<!--
# a" v# b5 l, G7 f6 m! o1 g7 tbody { ! u7 X# L3 U6 {" z) O2 a2 m; ?
font-size: 12px; ' K# ?) \) ?8 V) C6 [3 R- d5 u
text-align: center; 0 k/ H/ m/ C$ s; a, W( ?
margin: 0px; ) a6 O2 F- l; _/ B' Q
padding: 0px;
/ H" M1 |& L7 V( H# Q0 ~! \% |2 B} - B+ r4 q/ ]8 \6 l
#pic{ 8 ^" \2 Z1 W# Q
margin:0 auto; ( ?; x, B9 `+ k5 A6 L! o
width:800px; 5 S0 k m7 @9 ?. r
padding:0;
0 Z, W$ b3 h- r$ K( f border:1px solid #333; # c! Y& g5 @: _
}
. ^+ }) J# L( R) p8 S. A" e#pic img{ * M ]4 x1 \3 m8 O4 P& [. \) r
max-width:780px; 1 d( ]% q* u' l$ h. B3 }; B+ \
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ( e# V$ v$ N7 n& N" E' N5 w9 t
border:1px dashed #000; , d8 }* G0 x/ Z; x; @
}
8 F- J- C3 z5 ^" k9 n: j1 i) t--> 0 Q3 @1 u. s1 X* E% Q" z
</style>
% ] \3 d+ R- H' ~</head> 5 H' W( F7 n/ C. a$ Q7 t7 n
<body> ' [" j8 }4 m, h: @, i
<div id="pic">
3 e* q8 X6 R+ `' Z3 A- i4 q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / [( M& D* g+ L
</div>
& Q; [& B2 Y9 H3 n$ o</body>
; n( p4 t+ S$ I3 v$ n: J. k1 |* o</html> 5 H: ]" ^' c& Z- c( q Y' v
# i6 L8 o/ l# G- e- {. k$ e: `
百分比适应:
! U e8 r# O2 Q4 I以下是引用片段：
, n8 a1 {1 f; b1 R! t! R! M6 A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , D3 Z- N) W3 M; @" T( I8 G) e
<html xmlns="http://www.w3.org/1999/xhtml";>
0 d' `8 U* Q% P9 a8 y$ Z0 h<head>
9 k- F& q6 V$ k( ?3 m9 j8 a<meta http-equiv="Content-Type" c /> 0 U& _ g, M* D; K1 q
<title>css2.0 VS ie</title>
& _$ X0 ]/ B- r" r+ J! U<style type="text/css"> " ?( t3 a! T2 d# r! _! \
<!--
, H% D: K+ m. K7 ^body {
" r! r* J. [9 g; ]2 w3 pfont-size: 12px;
. @9 P3 a' d; w& g0 m: j- D" ~text-align: center; ! p/ J8 ]. j. m2 f$ X
margin: 0px;
$ K8 o |' w$ v9 c5 f/ F5 Xpadding: 0px; 7 t. _) X5 k/ `3 v i! `
} ; ~0 l8 E. o$ {5 b
#pic{ ! s2 ]% {2 z$ O6 Z3 ~; }2 R/ S2 |: w
margin:0 auto;
' H0 i7 _0 O0 M! g width:800px; 8 t7 k8 H9 Y8 K6 S2 l7 m
padding:0;
o- @$ u- {% O- e+ h2 U border:1px solid #333; ) B$ |1 I5 |0 t5 D) D* S, s. |" g
} ; ~) X6 i" c. X9 S
#pic img{ ' W. l7 M: K6 q4 n1 }
max-width:780px;
! M+ {# t" E9 S% gwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 k# q' L: ^! H0 P: `border:1px dashed #000;
& d: S1 \1 v3 t- z} 7 @- ~$ ~9 V7 g) ?% n9 V
--> ; k' x$ i6 C4 c1 i( h" L
</style> O% c/ d1 t. X% y9 l5 a" D
</head> p/ ?: l1 r) _3 \' |; G4 ?
<body>
9 ~9 r6 B" `6 h) M5 a: x6 a* Y<div id="pic"> # ~) h. H1 I; b! i7 d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / |# z. _& B# I, C4 w, n( |! U
</div> : U8 Z% G- o9 d5 @9 S3 c& P
</body> 5 \% a6 @$ \ h) p2 q* x
</html> |
|
发表于 2007-12-8 14:55
| 