|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14393
- 金币
- 2482
- 威望
- 1647
- 贡献
- 1430
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( p/ {7 P$ X/ v5 p5 s O# i关键在于：max-width:780px;以及下面那行。
+ W* q0 F+ V6 ]* c$ {( ^. A固定像素适应:
: E. X1 M& B# U$ u1 D& f/ `1 u& v+ H8 k
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> 以下是引用片段：2 z* T% |) b7 j% o& Y, U y6 Y/ \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * L0 A5 T: j. O0 G" w
<html xmlns="http://www.w3.org/1999/xhtml";>
, U1 p W8 [) m' p<head> 3 M; M( m! q2 H4 F5 o+ ~- @
<meta http-equiv="Content-Type" c /> c0 C% o, T3 s1 x
<title>css2.0 VS ie</title> / S- I5 @4 m9 L) v* R5 e9 `
<style type="text/css"> , I" G+ U1 F# C2 T& I7 y; A b0 K
<!-- 6 s% }2 a. H2 A" u, N& p7 p4 N
body { " s; n0 S& C7 K% j* S
font-size: 12px;
: B4 K6 u4 G" H9 H- ctext-align: center;
0 f: z. j8 V2 s7 `2 pmargin: 0px; " [* @/ j- d4 C/ D
padding: 0px; * k7 g: E/ n: T' S
} & a6 F; n1 d! o( V
#pic{ 7 i" h% B5 ?: k4 E) }( W% ]
margin:0 auto; " J% j' m) R9 X9 n- N! b$ a9 [( ?$ s
width:800px;
( G( ~3 }% b* V6 f) e4 P" ` padding:0; ! J9 E# [' R$ e
border:1px solid #333;
! e I3 o& A5 k% Z. H; `8 r4 X: Z } 2 G9 \+ I: r, b+ J$ g
#pic img{
1 Q( l& \$ K$ a1 O5 z) ?5 U max-width:780px; _0 c$ { x# j* r$ s$ b
width:expression(document.body.clientWidth > 780? "780px": "auto" ); # g2 q! @7 T% ~8 E3 ~
border:1px dashed #000; ; S5 ~! s+ t n @
}
% V$ s; F3 H8 A+ f--> ( O& u! E% ~' Q$ y
</style>
8 b* H, l# I2 y. {</head> 7 N5 t( [5 w! J9 |. d& Z
<body>
5 I9 |/ Z( m7 a% s+ D C" g<div id="pic"> b, |* P! L- Q+ ^* f! d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + ~" N4 g9 ~9 P% ?- P9 x4 d3 u
</div>
' T0 F) o* k# u ]( ]6 ?9 j</body>
5 t' @ P5 V e' i/ k6 q3 V</html> * x) I2 k; h5 O& X3 b1 k, H! s, l: _: q
& w4 x" C( p5 F; P) `/ Q! q
百分比适应:$ w4 ?. ^6 r8 v, _$ Q/ v U) D
以下是引用片段：- _$ d9 N0 x$ o. p( G9 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; D4 h6 `# @8 g
<html xmlns="http://www.w3.org/1999/xhtml";>
: P* c$ r6 U6 L# B8 N( d<head>
1 T' o& s* b4 }4 l<meta http-equiv="Content-Type" c />
! d& b' x. V R4 M6 x/ g5 E, X& r; k<title>css2.0 VS ie</title>
9 T* f$ y- Y/ T1 T<style type="text/css">
5 h) i7 A$ _ `5 o2 Z; B<!--
- Y9 _, |3 W) F* `6 n! {1 i; nbody { ' w( q* N6 o# o6 O2 R8 Y; z
font-size: 12px;
, O" X0 M5 i: L" K+ V' o! f% dtext-align: center; 0 Y# ]) O. F1 S: K' @/ F1 O
margin: 0px;
) P8 I' s9 F7 D+ Z8 mpadding: 0px;
) c6 o0 |. k8 |# T6 C% Q/ y} 1 P ^' j+ W+ N! Z6 t: P% j) N; X- [& F
#pic{ 5 U2 @9 ?: h' G9 ]
margin:0 auto; ' _# [, s$ h* z: n& A
width:800px; 9 t% X" K) j+ r& Q. q- P4 E
padding:0; ! j' F. @" D9 I5 u& j$ Z! D
border:1px solid #333;
( C' S, \% T- W% x6 B } : K- F, v1 s+ f: i
#pic img{ 0 s5 n( k% i0 J l5 O a
max-width:780px;
8 x6 G! {4 a l3 u, ]width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 r. R3 {$ X. `! F9 D7 Y4 t
border:1px dashed #000; 0 E9 a) K% B3 b: `% t3 K
}
" P9 t: i: s7 w2 T. {! p' ]-->
3 p4 c6 P# m! l& \) ~</style> : |- B+ ^2 }- d6 e' C2 b
</head>
0 a, ?- x- }5 d ]<body> 7 w! u3 w* i* S6 ?+ e! u
<div id="pic">
. h6 l' T( `5 `( z t# N b& L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , a {7 f- D* |5 i K# B
</div>
4 I- M7 U1 Z! X8 F</body> 0 H+ J2 _1 q" T0 w
</html> |
|
发表于 2007-12-8 14:55
| 