|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14331
- 金币
- 2451
- 威望
- 1647
- 贡献
- 1399
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。- @# b a, Y/ c0 V- d6 E
关键在于：max-width:780px;以及下面那行。
9 E p' e( _( n7 r( e固定像素适应:$ c7 R5 ]2 R }* c
0 [# U2 x: o. U' |0 z' h, l" ^4 s
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> 以下是引用片段：
) V3 h+ a! g9 c' J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 J4 L1 D" {* L1 \/ j6 c
<html xmlns="http://www.w3.org/1999/xhtml";>
" Q/ Z5 t! j' X% E4 a<head> % P6 t0 g- \8 C) q. |6 g4 [
<meta http-equiv="Content-Type" c />
/ x" \- w( }0 C$ n" y2 t<title>css2.0 VS ie</title>
9 Z! e/ ?$ j5 |7 Q b" E: ?, P- w! o<style type="text/css"> + f+ @% j0 y) D1 V) O, \+ g& F3 o
<!-- S- r" b# ^* h0 n' k G1 U
body {
& p# X# q3 m; m4 K5 B+ @, Tfont-size: 12px; ! a* z! H& g# j6 N: N
text-align: center;
! `. k/ ^' l1 A4 z- Z L! \margin: 0px;
5 M* k7 v# ?: E* W* S: jpadding: 0px;
4 x: l# k2 D4 j} ( b( I2 |% w! S n7 N
#pic{
* x: c& b: k1 a+ ?' B margin:0 auto; 7 ~: ^$ g+ O) M
width:800px; ' t. `4 |- L" A3 C$ z: J
padding:0; ! R8 P* g+ c7 X& u C: Z/ `
border:1px solid #333; 0 S* g2 V& F2 w- G( ?
}
7 t# O6 ?: A3 a' J! L( @#pic img{ . {5 U& T( _; p4 h& O1 W" K
max-width:780px; 3 G0 j) n0 i5 I
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 Q( d/ U7 }, [+ c _" _
border:1px dashed #000; * M! z4 e, i0 {5 |, v
}
+ w$ J K# _1 F3 W. I+ }% |1 d* ^3 W-->
5 f7 A& n* Q+ B$ g. _! F</style>
3 b& e. j( J! m& Y9 I</head>
1 c, [, W3 A3 c4 Q<body>
, k+ P( z, \4 \<div id="pic">
" M" Y# h' q* o<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- {" _. }1 d$ ^* {; S; Q- q</div>
5 Z3 F$ [; b! a5 T9 S</body> * L/ W: A( B: R9 e: \8 Z- K
</html> ' W& m: J7 O+ M3 ]& G6 w1 X) ?8 l
! r% r% t1 b& g百分比适应:. r9 H8 ~6 R" q/ X8 f
以下是引用片段：
8 |" H# O2 _8 q4 m<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + j# b8 E6 F' e4 A
<html xmlns="http://www.w3.org/1999/xhtml";> 6 G" |5 z8 N d' _# s$ n, m
<head>
# {. N5 l2 T3 i4 N<meta http-equiv="Content-Type" c />
1 F$ `1 {' o5 v& S<title>css2.0 VS ie</title>
! U0 l3 H0 u: X- t* w<style type="text/css"> 8 K7 s0 Y3 F L/ E& D, G% b9 z
<!--
- l3 \) }; {) y2 R5 b; u( k4 [1 kbody {
9 M! u3 j* Y; w3 ]font-size: 12px;
Q8 k9 r! L1 d. y) R/ @text-align: center;
! m/ A& k; q5 S' z* q! ~margin: 0px;
8 }; K: U2 V+ I2 ]padding: 0px; . N1 K0 B6 E8 D+ A: E: t2 {
}
, d6 }, x: X. A3 ^' ]5 \#pic{ 6 y A3 o4 c- N& ^8 Y
margin:0 auto;
( v8 r( N0 i. V1 [ ^ width:800px; ^+ |; S6 @) R
padding:0;
+ l4 R. Z' [+ T0 M8 B border:1px solid #333; 7 J$ N- v" ], @7 Y. E3 f
} / l+ \7 ^6 v8 s R7 Q
#pic img{ 6 U3 u* V" C: Q+ `
max-width:780px;
! q9 p* J2 ~4 uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. @+ ~; d6 l+ Q' G5 bborder:1px dashed #000;
L( G: @% c0 _2 S, Q, T) [}
3 U8 r& L+ x% b& d) X9 o-->
* R1 `" } ~) E+ M# y8 G. q/ O</style> + j8 Y0 \ A$ G
</head>
$ f# V" |1 Y+ ]6 C<body>
7 N3 [! b3 W6 E8 t7 a<div id="pic">
y5 T* _) l1 l# b6 l<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 |& u6 p5 z1 d" G! W$ C, o
</div>
* Q( D' K) ]5 l$ I$ l</body> " X0 B5 N1 A+ E$ m
</html> |
|
发表于 2007-12-8 14:55
| 