|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。$ E; o$ q# {! S: s5 b+ s
关键在于：max-width:780px;以及下面那行。8 H O5 c* o* @+ V# C0 p) D
固定像素适应:
* Q) R" z' l8 R, A% ?6 A2 X/ `0 g2 Y
T/ E; C) f* i* e+ X. t' ydotted; 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> 以下是引用片段：6 h' Y8 W8 A0 u& V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" h& o8 `: ]0 F j<html xmlns="http://www.w3.org/1999/xhtml";>
, c% A& X" b T* W: O8 m<head> 9 Y% ?' j& ?$ M/ a) d
<meta http-equiv="Content-Type" c />
" |7 ~5 h! g- z<title>css2.0 VS ie</title>
4 W8 O% E* t4 } W* B<style type="text/css"> ; X5 }4 [' n: t- j2 h
<!-- , K9 B* L' e; r8 Z0 P
body {
0 R( d, x8 a# o4 j7 C2 K ifont-size: 12px;
1 u2 p6 m' g2 V' m1 a/ C( Ltext-align: center; 4 I$ N$ D5 L @2 ^) i b& w- P
margin: 0px; 1 s/ Q$ o( p% m7 K
padding: 0px;
% s* v. G7 p# Q! V7 D3 ]1 M0 r}
# o- w; e+ [! ~# e0 |* B#pic{ ! M) V$ V+ ~& D# T y* x3 y
margin:0 auto;
4 K: |9 ~" {1 @ |& c( x: O( l0 ^ width:800px;
! T, k& k- P; [- W, W padding:0;
4 ]6 q% {& m* x border:1px solid #333;
' \0 _* d0 l" l! U7 p }
0 l! w: ~+ E8 q4 F) c3 C8 n: x#pic img{
( r0 V$ \- @, U& T! y4 | max-width:780px; ) H/ W8 R+ V+ E
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 r$ y+ R. e& rborder:1px dashed #000;
; p# J& L7 U. z6 c" t6 W} 9 Q& @* u& \$ e
--> ; E- d7 A; H' E! y. n0 u
</style>
5 h" R$ r }, d4 g: R7 `) ]# i</head>
4 T# ]- P: G# m1 R<body>
0 E, e1 P2 a+ H<div id="pic"> 7 W/ R" R' C$ I3 ?& V) {
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 i# _8 t3 i- B5 \1 U, v$ M</div>
/ Y* Z+ b" E6 U0 I</body> # ^5 q, z) ^" S% s$ C2 K
</html> 5 R% e1 ]6 p+ g( I4 A8 v L
9 F! P+ Q V* Z5 B: q2 V+ n$ d7 ]
百分比适应:
( I9 B0 M- ^: G v以下是引用片段：; E; G( ^6 O/ W( n3 Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " J) b6 l( D: N* F9 ^% s
<html xmlns="http://www.w3.org/1999/xhtml";>
! v9 E: S O, f. b* X<head>
, x, x) l: i. A- [$ W! }<meta http-equiv="Content-Type" c /> & b% k* m& O; b( Y5 D
<title>css2.0 VS ie</title> H+ v. D! f0 s; v: \, Y
<style type="text/css">
6 [; M5 F3 U) C1 K<!-- & y7 J$ \% d4 w3 T( Z& v0 ^) i
body {
& Z3 }+ ]' Q$ ^+ E+ L6 O& wfont-size: 12px; - ]* H# d$ l: c' I( p
text-align: center; 5 s' c" [1 s3 {( ~
margin: 0px;
8 a, X; [% C; e) zpadding: 0px; 1 Z# ?- P, C& n6 v/ ?; F. K4 l
} |0 _+ J5 a1 Y" L6 |
#pic{
! y" d! s3 z- P+ @ margin:0 auto; 6 d* W9 O- H" z( @
width:800px; 5 ^7 a; \0 q% p" K: ^3 {, k
padding:0; . Q0 k. Y* G8 a5 K A6 L
border:1px solid #333; 8 @" N) I- j& B2 K8 ]# ]
} $ L9 c. c( A5 S' z6 b
#pic img{ # I' }& \/ A) O$ b
max-width:780px;
) z$ [( ?" L' ?width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); . ?* }: [( l _, b7 l
border:1px dashed #000; ; R2 V7 r- ~+ @* R! Q9 Z6 K
} " ~" [ u8 u* E: ^
--> $ D/ b1 n% ^; Q z, s
</style> - i- r9 \) y! a3 F1 @' f$ o7 c
</head>
, _- D# q8 ~8 J, T" l<body> 4 p/ J7 s/ K" W( J$ K# `. N& p
<div id="pic"> . i) f* B# D- r5 T7 d N
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 W0 n3 n/ r5 P4 G8 r</div> 1 v0 q% ^4 o! T" T! B2 ?! U
</body>
: Z8 E. v6 Q" z</html> |
|
发表于 2007-12-8 14:55
| 