|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14417
- 金币
- 2494
- 威望
- 1647
- 贡献
- 1442
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ P5 R2 e7 {$ [关键在于：max-width:780px;以及下面那行。
+ ^" p! m& e4 z1 V: N固定像素适应:
# ^ s$ s2 ^# v; h3 r& ?
5 A; n( A: T, }6 @7 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> 以下是引用片段：
7 f' n7 J) a8 W, p<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 x6 b6 a: s# l. n# }: I<html xmlns="http://www.w3.org/1999/xhtml";> * [4 h# i/ l# @9 a' ?6 Q6 _
<head> ) \6 [, o8 s0 ~: y# d
<meta http-equiv="Content-Type" c /> # G+ {! ^% Y$ f6 z+ V4 W* }
<title>css2.0 VS ie</title>
$ j2 x0 Y# k( q0 J z9 p7 I# {4 l<style type="text/css">
+ g5 U- G4 W* Q$ q5 A. }& j1 r- F& r# c<!--
' Q3 c. m7 d8 d. ]body { : i/ L# ~2 n) y- b9 r
font-size: 12px;
9 |9 F- @- K6 E' h1 Ztext-align: center;
' @' e/ g1 Q" g7 B7 ~$ Umargin: 0px; # t, `" ~& ]- f, T; E
padding: 0px;
+ q' R+ J( o" [' p& q} % I( ^% P( Y: m3 R% W c
#pic{ , ^- I5 i% @; e
margin:0 auto;
# x% i4 T J; u5 H width:800px; ' H J6 L. [% j8 x
padding:0;
6 |0 J% @9 p7 k/ o8 p) B border:1px solid #333; 3 K) C7 t2 t& r S! o
}
7 C; Y# ^( W: P+ S: V#pic img{ ) v2 f, f5 h7 J( j3 P* ~% i5 Q
max-width:780px;
9 u2 k$ r1 P: h; Gwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); / h: i! |, c# Y$ T7 S1 _& ^9 V }
border:1px dashed #000; 0 M( _4 k, U) ~& a/ V, t8 \/ b
}
) a1 a$ w. n$ O1 q--> # ^6 o u% s7 n* I, X0 |. B/ f* E
</style> 9 C0 i7 c( @4 R, E2 F8 P
</head> 9 f: D9 F$ L' d
<body> 4 |: ^* u2 K+ B0 f
<div id="pic">
1 P' g4 z2 t" [7 }<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 l$ q* c0 z, e$ Y% _</div>
* n6 F6 J, Z% o2 {( K) Y</body>
( F, k, b4 w9 @</html> 9 g# [$ M- V6 a8 d
4 X" @% ?* Q1 B
百分比适应:
4 F# d8 o# g' ^以下是引用片段：) x9 A+ Z0 C7 E, x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ Z i- z6 C. h8 X$ y. h% L2 z
<html xmlns="http://www.w3.org/1999/xhtml";>
$ L4 A- V0 i! E& ]7 c+ L1 d& l0 f<head>
0 N( V! G2 q& z' D<meta http-equiv="Content-Type" c /> - |, ^- d$ O! I# y7 c/ c
<title>css2.0 VS ie</title> ' P% ~5 R- J; x
<style type="text/css"> 7 _+ }- K- }& t# T# ]) |
<!-- 9 `5 L' R! V( N3 N
body {
- i' l4 g6 ^. d3 A& Q+ A# `( rfont-size: 12px;
& t/ \& \9 A; ]$ B; e1 Ntext-align: center; ( c }0 h1 h- f- D- O- k
margin: 0px; + _; y2 M$ R: D2 O' t4 o& f7 j
padding: 0px; & ?7 K; n3 H3 i( C7 @* X3 d
} 0 x, y( W$ h" j1 b- _8 m/ P# Y! Z
#pic{
1 C2 b1 H! `( E+ g8 O/ G' ~8 _) M: e margin:0 auto;
) \! N: ^1 H5 D. m% T( I; Q# _ width:800px;
0 N6 \% d' X% F2 C padding:0; + U; Q6 ~$ p- g1 X; K4 \ W
border:1px solid #333;
% d- \4 \7 x# R, Z- @. e! g+ { } - i. ?8 P# u$ G9 G/ V
#pic img{
3 v( d% p; ^2 Z( m7 E5 ?0 a max-width:780px; / v* ^% u% m T5 H, H2 M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); % D8 N/ I. m2 i0 ?! C% [
border:1px dashed #000; 7 Y1 i+ G9 [9 ^4 n; ^: [' o
}
2 v7 r5 M& D. F7 `4 G+ I! N- f--> / A8 c4 s1 J4 ^- [, f
</style>
: w7 k& H8 A) X! c) ^</head> + s: l- z; x w$ S$ f
<body>
+ B+ s O8 H3 ~3 [& Q<div id="pic">
4 q9 c" N& z: M# R' c7 T3 f3 ?& Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ p# J9 m( e' R7 g: A5 k</div> 7 S! @& z$ a- P/ o0 f& y
</body>
! o0 A% T3 y' K0 p</html> |
|
发表于 2007-12-8 14:55
| 