|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。+ E- E7 W, E6 q% ?
关键在于：max-width:780px;以及下面那行。
8 |1 @5 Y& l$ h9 g& R2 u$ y0 V固定像素适应:
$ N* {3 j) O8 \( W! J
) q( a: g% z2 Zdotted; 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> 以下是引用片段：
# i$ \) [0 t: @: B+ j9 c; w<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ `6 E4 t+ C% J6 D5 p
<html xmlns="http://www.w3.org/1999/xhtml";> % T3 s% {! K: O% X
<head>
! R7 I- P' N2 {& A, f$ J* S<meta http-equiv="Content-Type" c />
& O5 I/ q) y0 e' C& w2 G: i0 s<title>css2.0 VS ie</title> " x; M/ x% N) f% \! @
<style type="text/css"> # U' z1 ]' Q: Q: d' e7 G6 s3 X5 Q
<!-- . K8 G* N- G1 O$ o& P
body {
9 g. j) j1 G! {4 Mfont-size: 12px;
. n6 p+ Q: ]+ s- ktext-align: center; 2 @# k1 l b3 o9 t+ O
margin: 0px; 8 k0 P0 s5 S; A5 Q: `$ ^# ^% T
padding: 0px; 2 G3 d7 Q, A+ R0 D
} S( q9 b0 [, t$ U
#pic{ $ R4 p; r1 H$ c7 z* I9 A2 T ?& c
margin:0 auto;
! [! K1 J+ [" w+ V8 r" Y) P width:800px;
+ X+ R% F; L: B2 k padding:0;
9 o( Y# Q' \/ _) a) l7 G5 l( | border:1px solid #333; 9 I8 m9 G/ }# j/ \
}
# q5 ~: ?) T- A5 N#pic img{
/ q, s; \, ?, A7 o% L2 t6 ?& }" ] max-width:780px; 8 N$ ] Z1 p5 l( p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ s9 K# k2 c9 o) Z Qborder:1px dashed #000; / m% s6 K1 R' u0 u% \9 p& b
} " _- e( x {. H( }$ Q! ]
-->
, K! y# x1 a) H, R</style>
7 ]4 o3 c( g2 h. V& l</head> ( | M: Y2 x; q/ w5 h
<body> ) S2 o$ ]/ a; Y H. X" i3 X
<div id="pic">
5 {1 \0 b" Y* g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: X3 x1 b0 p: Q) K2 g% x! Y</div> ) d# W- y z: `: ~/ W' J
</body> . Q' G8 _2 {9 G4 C1 Q8 n
</html> 4 H0 ~ ]. p8 I+ D' `# ~
! ~2 E; ?8 J7 k) t- T( U' I百分比适应:
: r- F" B$ ^ B' n! m6 ?2 W以下是引用片段：0 u! D' A$ `! Z: W: K G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . g+ q3 ?! ^: K( a+ X6 p9 K6 [" s
<html xmlns="http://www.w3.org/1999/xhtml";> 0 k% g/ [- h9 c% p I
<head>
0 c! T0 P: v4 d0 z+ n<meta http-equiv="Content-Type" c />
}2 M- c" ~+ t7 v) A& L<title>css2.0 VS ie</title> ( D9 i$ q3 S' v a8 `
<style type="text/css">
' H1 T' S0 p2 [$ ^4 K. I<!--
1 \7 H" k$ K3 g$ k& O: `body { , L# b/ D* ]4 c* ~9 F. w5 m& g- y
font-size: 12px;
% S( c. i5 c" w0 C5 Ctext-align: center; 6 h: ?' `4 L; ?
margin: 0px; 0 W- {" \: x) Y+ U- n* E1 R
padding: 0px;
; `1 I/ C. u# N; t: d( B}
3 l1 o% Q& ^$ n9 _5 Q. ]2 B#pic{ / n% {& b% p4 ]: ~$ U
margin:0 auto; 1 H1 ~0 @- T; n" x& ?
width:800px;
9 n2 K6 v9 F& D9 S padding:0;
9 q" n* m- t7 H( C5 I border:1px solid #333; : W5 Q/ e+ f6 Z! Y" u B. }) i, A
}
# z7 P3 ?- C, O/ v$ _#pic img{ 9 }7 w8 J4 Y' ^4 m1 U% b1 X* S
max-width:780px; 2 P& W( S& U( f6 {, }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); % Q$ f3 x& g1 u" q4 X p
border:1px dashed #000; ( p* k; U- h. f1 O! m
}
# f; x3 u7 ~" w! Q4 U) ]6 _' n--> 2 P( [2 Z$ i9 Z6 U3 G' S, y/ f
</style>
% R7 A+ F& \% F8 P1 U! X8 M</head>
# \, F# {% f, G' ^9 R<body> 3 ^* k6 y" ]$ j% T. a" R
<div id="pic"> 8 u0 }/ c: @# o3 A( Z1 a& j0 B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % i& @! [& m: {
</div>
- q$ _+ o. q; |, y+ J$ d6 {6 p</body> - O" {! q5 D, A7 G
</html> |
|
发表于 2007-12-8 14:55
| 