|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 b# ]8 u. n: a3 A- U% T8 o( d关键在于：max-width:780px;以及下面那行。
" B$ y/ z! w& j' a4 U固定像素适应:
" V# C, x2 I7 Y7 v \; A2 M$ Z7 i
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> 以下是引用片段：
; v- N1 ?8 ]. k7 _1 s- S* D _; n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( @, y, A- |$ E0 u; i5 |$ S<html xmlns="http://www.w3.org/1999/xhtml";> ! k/ @9 L5 S! t' _9 ]6 u
<head> . P+ ^! t6 C! S6 b2 u
<meta http-equiv="Content-Type" c />
5 a3 y9 q8 F; _% w2 O0 E7 O<title>css2.0 VS ie</title> . ~, m3 \' \5 i8 n$ }" R0 f, M# I
<style type="text/css">
* S0 n1 B [) n O0 B& \<!-- ' @' j1 ~0 h: L) m
body { , V9 y0 T; \/ v( Z( d E
font-size: 12px; 6 W+ z! `- U& [ O. }
text-align: center;
+ }! M! y' l ?) V9 cmargin: 0px;
! i" K5 X+ Z. Z# H: I% c! {padding: 0px; , X' A- T0 p# p. w! Y9 L
}
# L* M5 v2 V* ^" p#pic{ ' b. f4 M' Y* m8 t1 i
margin:0 auto; 8 }5 X5 a2 w% z$ S
width:800px; & _! ?/ \7 s) b; J, T" o
padding:0;
& f% {# ^8 J" i2 T border:1px solid #333; 7 f, H7 O, a( ?& k5 K" X
}
& a F2 c8 q; R, V0 J#pic img{ ' A* o8 w+ d6 p- C
max-width:780px;
( O+ P1 e8 l# [( W: c5 Q$ V+ R* ^8 Mwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
: M& E- }. _1 ~ fborder:1px dashed #000; 4 Z: L+ O7 B" |" X: S y
}
( v. J! ^/ K. Q% {# Q+ h-->
5 ?& z1 E' a( D" C+ b1 {</style>
/ B# o( i- j T0 j. t/ S4 K</head>
8 Z1 g+ R) [. `0 b t5 z9 E, s<body>
4 a$ y4 m3 O0 j1 m* U<div id="pic"> " Z3 j/ _% V- ?/ d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 H( Z, K9 R3 S& X5 U& c5 G
</div>
, K( C9 d! y+ r* K</body> 4 _( p( X1 m S; A* g: K; N
</html> ! p! J. m$ v. w
4 d" y& t2 v+ U% z
百分比适应:7 L- v1 O, B& x+ m- ^; B
以下是引用片段：
8 V$ L) S3 |6 W* G<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; F0 [0 d) C, _9 R<html xmlns="http://www.w3.org/1999/xhtml";> 8 s( c9 _: M( w) e" w
<head> . `2 B1 V6 a1 T1 n1 l/ D9 V- v+ ]
<meta http-equiv="Content-Type" c /> 4 E0 K3 f8 S" t
<title>css2.0 VS ie</title>
$ o- G" `# T& h. z% Z% H<style type="text/css"> % t( z h1 P5 O
<!-- . f& q; Y' o9 Z0 n' i1 B
body { 7 F c w5 T8 h
font-size: 12px; : U `" }9 A( n. J% n- R
text-align: center; * P ~" W% B7 p
margin: 0px;
$ {4 m ?% D9 }; spadding: 0px; ) h5 x; ]! r0 l' p1 g) Q) [
}
. I1 y! I( j4 N#pic{ 2 F; X0 g+ S. q# p& B% w( C2 w
margin:0 auto;
! m/ _' Y" p7 r& L width:800px; ; I: j' i% ]; o' A8 Q7 f
padding:0; , s8 l8 G+ L6 m
border:1px solid #333;
0 m& \' G; a1 J8 v7 s7 | } ) u$ H: }* E6 ^0 t' u, D
#pic img{ % r S4 t2 B6 @ k
max-width:780px;
, D d# b6 X& ]/ @, nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 Z& _/ r* v! N; S1 Vborder:1px dashed #000;
! G2 t) D0 _ { w4 W- a} 8 @0 R+ R0 S9 ~5 b' r$ w; V# t
--> ' j" w7 L1 N8 l
</style>
9 Q: x; v) t( c9 g! N</head> $ N9 d- w5 t4 G: p4 A
<body> ( x: L6 B _7 c% Q' @
<div id="pic"> 3 ~" t* L/ A; Y5 P% k" b3 x# W: M/ I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 s+ t, X" |5 a& e</div> 5 W- N- F) p) a5 D* A8 Y
</body> 1 N# } e# P* D
</html> |
|
发表于 2007-12-8 14:55
| 