|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" [. \+ B! ~8 k8 [# n* r$ W% ]5 c1 V
关键在于：max-width:780px;以及下面那行。
5 v5 m) t$ n j+ g& |固定像素适应:
h$ \% Z% j; B5 X7 y4 |
$ @+ B8 z9 @' k8 R+ Adotted; 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> 以下是引用片段：- e& d+ J- I3 |: n* f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 L9 u1 I; b7 Y" }9 s+ s
<html xmlns="http://www.w3.org/1999/xhtml";> + p, ]) C7 a% J+ S1 ?5 G5 R
<head> 0 t! n/ n0 K# Q6 e E, y
<meta http-equiv="Content-Type" c /> - N& B, A1 K# k2 C9 \) o
<title>css2.0 VS ie</title>
( ?; S, l. p3 y) \0 ?- J; P) W5 Z<style type="text/css"> . P1 o. V( g& ^! a2 p) W
<!--
9 r8 t: L' c! \/ D5 vbody { ! V1 S" ]% a) W2 d4 u& K% Y
font-size: 12px;
" h7 U( [& ]! t+ s% c4 btext-align: center; 5 Y$ j5 a% m, F" r! `, p4 T8 `
margin: 0px;
0 C5 i" `# e6 `+ Jpadding: 0px; 2 [+ ^; `: e' r9 Q! p X5 C. n: Z
}
& A0 n' v; k2 Q* { l* m#pic{ ' X3 d/ O6 o' [; v7 Z* |* Q7 D9 M
margin:0 auto;
1 k2 t# c; H/ J% T1 i' | s width:800px; - b& v3 s: ^5 x9 @" Y
padding:0; ' S/ M* f/ I' X" w9 c/ o/ E" L
border:1px solid #333; - T# j9 n" v- I4 D. N8 a, H: C
} $ M, _' Z0 `% I. ]
#pic img{
^8 B- H% S; h3 V max-width:780px; 7 @( O! f" I3 A" N- q7 e2 y4 Q; z
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 l5 C; e3 V& h# I/ i8 U7 |0 k8 k
border:1px dashed #000; % M8 f+ i: m$ t
} @$ [) k& G# A" ]5 d0 n
--> ; E: S* W, N. T9 G
</style> g# s: B& s$ K! ]# a5 u' \9 I
</head>
2 z* }4 p5 W4 E; a7 h9 Z<body>
* r7 @/ J& o& N6 @<div id="pic"> `( h* P8 K8 H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 E) |$ @; j N9 ~( {) G, s
</div> $ G% _8 y6 d- I
</body>
) C2 ]- ?* I) Y9 o2 u7 `+ d9 j) F" O</html>
. n H2 \% _/ Z* [. {" S
9 S7 ?! z* S( B3 k/ ^7 ]百分比适应:% p+ I2 S, H9 u0 b! h
以下是引用片段：3 p$ n) x" n6 J5 L% j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . E% w2 [6 X, G# C
<html xmlns="http://www.w3.org/1999/xhtml";> / [ v; x9 a T
<head>
8 M0 d" h* j0 H7 _1 H$ p<meta http-equiv="Content-Type" c />
7 @; I8 {& i8 ]1 g<title>css2.0 VS ie</title> % V) [# A% U9 \# u
<style type="text/css"> 6 I" p0 g9 H- b+ p& z9 C! ?4 u. T# s1 c- r
<!--
' k; g! U5 b6 k l( @ @" ybody { 1 @3 Q' {% s0 _6 R
font-size: 12px; , x I* ~0 U3 y5 R) Y9 o
text-align: center;
( f- P/ @9 R. i" \1 `& a- \margin: 0px; ! g1 P2 Z2 g4 K4 |4 |' O
padding: 0px;
- S" l! J( u. j" ~" J}
$ g! ]8 T- N/ B7 K+ {8 V#pic{ % u0 e4 s9 d) s4 U! C; i
margin:0 auto; 1 C" W6 ]- l% M# C! X* U$ u
width:800px; . g+ z) Y5 Q( A: _# h# x
padding:0; $ E6 c! `) e, _
border:1px solid #333; + d4 h6 \* C! ?1 E
}
. L% R$ O9 C- K' l8 A5 P# x#pic img{ - A' J8 O ]* o# V8 @
max-width:780px; , C4 X! w- Z- ?. \
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
! z7 b( H$ @9 ]$ `1 l4 N% @" Kborder:1px dashed #000;
9 N" H4 G+ K. g9 h* o- |}
! e9 L1 @4 b7 [% U--> ( b- t6 |2 X2 q/ i k; G
</style>
9 V3 }- M* g# E/ ]- [</head> ' c1 p' y8 v! c" P7 `8 ]6 E! I
<body>
) E) t* {/ I( d+ @) ^<div id="pic"> + Q) [) V6 m+ s) U$ v
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; L2 }1 A7 @* X</div> + o: ^( @) C9 e
</body> + C( O: }! W5 o, a
</html> |
|
发表于 2007-12-8 14:55
| 