|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 Z8 x% G9 N! [! J/ z* e6 | s
关键在于：max-width:780px;以及下面那行。3 {! d8 q3 M) M# U' v2 Z+ ^1 K, A
固定像素适应:
r A8 G7 I3 u5 l& i! _
, i' b, T( t& B+ Kdotted; 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> 以下是引用片段：
& @9 [5 h% j; j<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . V: j1 l+ K6 {
<html xmlns="http://www.w3.org/1999/xhtml";> # d: f4 m9 d, r. L- {; }8 ~! h
<head> : @% \ L. B7 ] x/ Q
<meta http-equiv="Content-Type" c />
0 o, t7 M9 p0 g* L& B# R0 A: \<title>css2.0 VS ie</title> 8 J9 y$ q% A* @6 k
<style type="text/css"> 2 C8 K! f6 q6 S% ]4 E9 V8 g
<!--
! \& t9 q4 G6 O5 X/ H& T6 k( m3 ibody {
5 c8 `' J( N$ p4 M2 H8 Q: A" P& ?font-size: 12px; - y1 e8 D8 o7 h1 O- O& L
text-align: center; ~6 v" I8 v+ |
margin: 0px; 5 m! Z+ T% C1 r9 S# @& j$ _' k
padding: 0px;
/ ~# c5 k3 X& O% q Z8 Z4 p) ]}
! m- U: N& ^6 ?0 Z: J#pic{ " n4 y3 W2 L1 c, ~ D4 T3 x2 ~
margin:0 auto;
3 X3 z b- _% \/ u4 S1 _ width:800px; 4 a0 ]: W3 g. n- [' H0 C
padding:0; + V' ?8 r: T( k
border:1px solid #333;
! U( r% `$ \, p. y- G* k$ k3 Q } 8 T2 r6 O3 r* t0 E, T) e8 U
#pic img{
: e" [7 F( p' V# J( n+ G& s, }8 h max-width:780px;
& P. S! T+ F. }- r% O5 {width:expression(document.body.clientWidth > 780? "780px": "auto" );
% n. g: A/ T9 r6 X5 G" _border:1px dashed #000;
) G( t7 w8 [3 R}
: J8 ?- o- C, f# J9 P--> ; ?2 w: n4 s9 a7 i
</style> 0 I+ U7 Q+ _" v
</head>
3 a- u2 d# K; t1 `<body>
) g) p6 S, O: `+ z5 v<div id="pic">
5 o. U8 ]! @6 `5 i+ [ S<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 e* X# f ]7 O( w</div>
/ E* w, W1 p9 m! V6 B</body> 8 [7 F n' S* h9 k' g2 P
</html> * V; ~2 A( |3 f& v, p/ X8 h
. p- v- O0 d) c" O- k2 q
百分比适应:5 |7 [- R2 z3 i6 V1 N, K
以下是引用片段：. m! Z0 b8 @0 X, p; V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 E2 z. V/ K, N8 _$ V
<html xmlns="http://www.w3.org/1999/xhtml";> / X; o4 q8 y/ P6 M
<head>
* u! ]: k- W, r7 ~<meta http-equiv="Content-Type" c />
k4 v4 ?: f2 q( q<title>css2.0 VS ie</title>
o1 X3 U5 C7 x2 N$ H8 @<style type="text/css"> , q0 g8 x+ _3 V2 g5 u* H$ o- o: t
<!--
6 p. v( w1 y9 P% F5 Ybody {
+ v3 n& ^& [# F' i) Q9 r/ ?9 U5 Kfont-size: 12px;
8 R4 [: ~& L. u3 ?$ v5 y7 s& xtext-align: center;
4 u8 c1 I+ ^+ ?, p+ l$ z+ i) cmargin: 0px; ( Z% b: r5 t! F8 j& n( N, Y
padding: 0px; ) C1 J! e& V9 I8 F
}
8 D$ a% A5 K* w& B1 V. N) P, w) Y# V#pic{
8 t; H t3 k5 q8 [: u e margin:0 auto;
- {: L8 ]- L7 j! q Y* f width:800px; + H) g) c: g/ G% {* ]
padding:0; 7 u# {, y2 g4 R
border:1px solid #333; j6 Y6 |/ e: g( h1 O8 g3 e
}
6 a" h/ z9 \) C5 `! `' X#pic img{ ) u- l# o7 v M
max-width:780px; + n3 C+ |5 W/ Q z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 ~$ J, f1 s9 H' f5 c4 \
border:1px dashed #000; 5 x1 p$ f3 q% M
} 4 R5 e$ m& E3 F! Z# {8 F7 H& r4 G
--> 8 @- s% L* z& N
</style>
, r8 C# [3 {$ o8 w6 W+ J! v</head> ; @# D8 |9 m$ r% }' V
<body> 1 u9 s. N$ v$ @8 c5 Q$ Q. E0 a
<div id="pic">
8 [2 K7 m8 N" c+ v6 P/ y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. f; B7 N- y1 d$ q R* u9 i</div> ) A& o- q$ k) t7 C, f. `
</body> ) B0 N4 s0 ]+ n9 R2 B$ U
</html> |
|
发表于 2007-12-8 14:55
| 