|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14163
- 金币
- 2372
- 威望
- 1647
- 贡献
- 1320
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。4 ?/ m' K, S. a& [
关键在于：max-width:780px;以及下面那行。
+ w+ w5 w/ z- k( `* I7 f! }固定像素适应:/ \7 p6 v6 O& F o9 q' k& Q
1 }+ @- b$ T* c" I/ G
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> 以下是引用片段：# g$ s$ r. C' Z/ b$ Z* W+ e1 ^8 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' l2 U; N! E0 E' d: {<html xmlns="http://www.w3.org/1999/xhtml";>
* Z, r+ o+ P0 F/ J5 d6 m5 `<head>
1 [! U6 h6 e% W5 e9 N<meta http-equiv="Content-Type" c /> % w+ N1 J" b7 e. R/ V, [: i) T- t
<title>css2.0 VS ie</title>
, [, m! Y! O) S/ T5 B! ~<style type="text/css"> - j$ N# S" ^& F
<!--
3 J" p& X, E$ N% h) h7 v6 Lbody {
s% S1 B' @2 A/ B) N8 I i! l! @* Ifont-size: 12px;
+ |9 F; z; f3 z: ^* ?text-align: center;
) N$ g+ C9 \, W* U6 ?margin: 0px; . |* H2 I( X& P- l$ @& N
padding: 0px;
' q3 C; Q% {0 L0 ?( B) w2 x- p} / `6 F0 k4 L ^: M. B, o( W3 v
#pic{
5 N' ?8 g. C u1 E8 H2 Q: C margin:0 auto;
" P4 h z9 T1 S; A I width:800px; 8 O. {! \7 ~( m! B" a8 { |6 g
padding:0;
& O( A/ G+ _0 b$ A border:1px solid #333; # Y1 Q/ n6 E$ q( ?: w, S/ f0 D
} ( m. R* T2 z N& N* Q
#pic img{
3 T* w! C# G1 \ max-width:780px;
. f8 w6 @5 X8 o5 T5 owidth:expression(document.body.clientWidth > 780? "780px": "auto" ); - p* E0 k% X7 P5 `7 t7 d
border:1px dashed #000; 0 e( Q3 O- o6 M- Y: R) t3 S
}
) Q. X3 e$ v6 s, t3 A-->
8 |% [( j. E8 N</style>
9 t8 A& z' E0 ^! |6 T9 O/ H</head> 5 C8 `) t2 b/ m6 C4 W- y
<body> 0 x& f3 H, A# e0 P$ D
<div id="pic">
1 B) q( W! ]5 R/ [5 T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 }3 u5 G" l! B, z</div> ! |0 t. n# y: I* `6 R
</body> 8 M7 s- P2 j9 [# f
</html> * h8 @: V2 f& k7 r# p
$ R( E. w4 @+ s; O. V6 t! h
百分比适应:* b2 Q" z) i' r
以下是引用片段：
. D' j; t7 h$ J6 }+ j<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# {& \8 x4 \3 m* E8 a/ R<html xmlns="http://www.w3.org/1999/xhtml";> 5 p ~6 Z/ I. J$ A1 m
<head>
) H" J d$ ^% z<meta http-equiv="Content-Type" c /> * r1 p6 g& _) k
<title>css2.0 VS ie</title> . S0 p; g% P1 Q* i) v H' [3 w
<style type="text/css"> 0 y- B4 Y* D3 j2 ]* |- o
<!--
% V4 V3 w. \% z: U$ L1 ybody { ' H. G* n9 P9 @( t# u0 j/ m* F* ]2 M
font-size: 12px;
% F7 h7 _+ Q& ^% {9 {- U7 W5 k0 }: Wtext-align: center;
$ ^3 y G8 C" {$ q$ ?2 Emargin: 0px;
# ?- o/ A- h1 d4 `4 a1 C" Q! Q, qpadding: 0px; 4 v# W2 }+ q3 A6 {3 b; t1 v) {
}
0 a% |1 \. p* }! P" p7 S; [#pic{
) \1 z8 x0 k8 H6 D* b- {- e margin:0 auto;
0 ~0 B( ?: r* Y/ N' f5 l/ G width:800px;
8 b' {- J+ @6 |& n2 B' T padding:0;
' D+ k3 ]$ ?& Q _+ ?! } border:1px solid #333; $ x; Y8 {7 y$ H/ `" Y
}
: r, ]4 j3 X J" E#pic img{ ( ~; F S$ r w& U
max-width:780px;
: \3 S# L/ }/ k8 S) g, ^- V% Jwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 1 D2 ^: i" g+ h m; r1 P
border:1px dashed #000; % ?, j' R6 t* V9 c) y' ~3 j. R
} ! v6 E: }6 I, w( m8 s/ c$ t
--> 7 v0 v! j- h1 A) Z
</style>
. b- O* e: n" S i</head> $ u# ]% s1 C2 N4 M+ Z, H
<body> ) ? }' b# Z4 b
<div id="pic">
5 W$ n% A9 c0 ~( o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) ] J3 n9 Z8 Y
</div>
0 v/ y) W/ Q) m/ c5 z8 @</body> : j y* ^; c; }/ j$ C; m1 _, p
</html> |
|
发表于 2007-12-8 14:55
| 