|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' S+ S/ L2 T5 w- d) y
关键在于：max-width:780px;以及下面那行。: g" }, n3 s8 D, ~$ j
固定像素适应:
' U; z2 V, e: ~1 y7 b9 `4 s, t5 X5 n1 O7 F6 w
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> 以下是引用片段：
/ m/ y" f& r4 ~' h6 T<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 G% J( R) _0 I* B" [
<html xmlns="http://www.w3.org/1999/xhtml";>
( I" S( M; E. m( l* J/ U( f<head> 9 k- t* J6 }4 Z
<meta http-equiv="Content-Type" c /> / s/ @$ ~, A1 m4 L9 T, K# l
<title>css2.0 VS ie</title>
& X) k/ f; R x2 m& y<style type="text/css"> " t4 n' C1 _9 l/ i. @, Q6 h/ R
<!-- 5 U. e# U7 X0 o6 E
body { - n9 G3 n: q5 v; I' q
font-size: 12px; 2 L( Z4 `5 n, n' ]9 x
text-align: center;
7 }& a# c& ]8 w0 ?- I. o/ Fmargin: 0px; , T! R6 y+ y6 m) \6 M$ |
padding: 0px; $ j* [# s" Q& e# ~
} 5 q' r6 ~& o8 W/ P: R9 h6 f
#pic{ + F# {, R" _, t; E1 g1 e
margin:0 auto;
- i+ e7 g( m- o: A( Z width:800px; ) W+ K9 n( a& z6 u
padding:0; " \) B c- j* `, C+ v& I' q( ?
border:1px solid #333;
1 J% ^* \- e7 e: @ } * b } I3 L* K7 v1 o) I. e
#pic img{
L* }. Q# O- A max-width:780px;
8 J, ~+ k+ C+ E4 f# V Q6 T7 pwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
& H2 L2 \. M/ L# p: G% ] ^8 Jborder:1px dashed #000;
* y; ^6 S/ \+ x7 B& q8 @: w/ W- Q} # p6 \( Y( x4 N4 L# y$ y5 c) `
-->
& t+ T5 f$ f& u" T0 i8 A) e3 S" L</style> # Q% L: z2 {/ t7 [5 B
</head>
5 P( F+ e A4 \7 d6 [1 b<body>
' o9 _+ d! O4 v& P$ S5 h<div id="pic"> ' y. R( w* f- Q X
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) B: _9 Z9 k, a# c4 r
</div> 5 |& N3 z8 e' \
</body> + s3 Q& {7 _2 @) m1 `
</html>
5 z% V4 g7 n( C& G/ ?# B+ B* b. s& I
百分比适应:5 V. ]4 o1 i; }+ D' I" b
以下是引用片段：* y$ R, c2 @, E$ r, ]$ e- x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : P2 c$ c5 S) v2 a) G9 f
<html xmlns="http://www.w3.org/1999/xhtml";>
: o* o2 M) T3 R+ C: Z: c& z: K+ ^<head>
& W! s- r, H, o) c$ z7 `/ l<meta http-equiv="Content-Type" c />
) A) j5 W2 M) ]/ D! w<title>css2.0 VS ie</title> % V1 x1 O& p) D: K+ y! v6 Y6 N
<style type="text/css"> $ H+ G0 T& ~: J* n1 i) G
<!--
: u6 Q7 b5 h- `' E0 Y, Dbody {
7 _( t! w. ?: R T( Ofont-size: 12px; * c) ~, c1 I( k5 V9 q
text-align: center;
" u1 U4 K( f2 \margin: 0px;
: g0 [) p- I9 ?' Gpadding: 0px;
% m& w% ^0 V% {}
& k" h5 x5 i' V, W#pic{
8 a9 \! _2 M7 L; b margin:0 auto; 1 G8 U* f- U7 _5 z- C7 @( C# W
width:800px; 5 e3 I7 |0 z3 [4 X7 @0 }$ U. o
padding:0;
# E' J4 h; |. E% I- ?( Q border:1px solid #333; 8 O4 W; G5 w) g0 s: P
}
% H* w- h- w; C' n/ K/ g#pic img{ ' o+ x% n$ Z. `! y n0 R' a; Z; Q
max-width:780px; - _7 e+ L B; E2 T! `' e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ G& Z: s+ ?5 m, C' [border:1px dashed #000;
: N- F0 O' _& e& N" S! W}
2 y% g9 p! b2 N6 L) v- y--> 3 ^5 \& { A7 a; R
</style>
! X% i! y/ ~% L/ b' a, L/ N</head> . R8 L/ u: }2 Y& a! L+ l
<body> 1 X9 {* N! F9 o
<div id="pic"> % J* I7 V- A9 `+ o# w* y4 ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) k' z' V! x0 ~' J& }% j/ s7 Y& V
</div> - w$ |. p8 X0 u3 A6 }, g
</body>
Z' @* D; `" v! \ a! ]</html> |
|
发表于 2007-12-8 14:55
| 