|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14331
- 金币
- 2451
- 威望
- 1647
- 贡献
- 1399
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. `2 j- U* I- N关键在于：max-width:780px;以及下面那行。
& ^. n5 I+ T! m3 d固定像素适应:2 t' z* i2 k3 q- Z% Q
. [& |' G4 W" edotted; 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> 以下是引用片段：
* j' V9 M& ?+ b4 O4 v( M<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> G( w! [: C( w$ i" @/ C
<html xmlns="http://www.w3.org/1999/xhtml";> ' I7 Y1 i$ V5 I: d' ?$ u
<head> $ \; k8 m ~+ x: K, R
<meta http-equiv="Content-Type" c />
: o' w, X* D& {6 M<title>css2.0 VS ie</title> ! X! I0 F1 @9 z: L
<style type="text/css">
& g2 F# g+ D3 R3 c' P) i/ C, T" m8 _<!--
# O* o7 L+ I& g. ~ ybody { / |/ Z+ U: f/ P H4 }- b0 Y4 T
font-size: 12px; " i* Z: Y/ W$ t0 {* ]9 z' D
text-align: center; 8 c4 M- b1 h8 @% `) h
margin: 0px;
' n: m% a/ Y% r' [. `, Z( Gpadding: 0px; + z) |5 O1 q6 q' C! |; i3 U( \
} ) I/ f. I: _" T7 \: N( x
#pic{ % l3 S) k/ M' Q# Y1 G2 \# T! E {
margin:0 auto;
: r; b% _5 `5 f" {9 _" u" j width:800px; 8 p; v' @* c2 ?4 f" R8 F( {6 Z
padding:0; 5 J4 R, A7 n6 `
border:1px solid #333; $ t! H/ O' `( g, p
} , b( J w, e5 H6 L7 h
#pic img{
: B* i5 O% T$ s; Z6 k$ L& d4 q( n& Y max-width:780px; 4 H1 h# F1 b v+ s
width:expression(document.body.clientWidth > 780? "780px": "auto" ); $ H* V& N6 i0 O* |, C
border:1px dashed #000; b8 w6 l ^: R8 ^% I W. S3 @7 D$ L
} : R8 x, f1 Y) y6 |
-->
$ _' D& L7 a. S9 y. Z</style>
0 c0 e( k4 v- K$ b2 g</head>
+ S4 @8 A' o! n# C<body>
- R9 e2 y; A7 L8 V8 r7 ]6 P# s& E& G<div id="pic"> ! ~% I% a/ i6 \" [! p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " z1 o& j( i0 P* g. Y% Q
</div>
+ B* A# r% T' D' W4 n. \</body> ' Y5 u6 t9 Q7 P& O2 i, h
</html>
5 q( R2 e1 H- y9 ]$ q( ]
$ F( m5 k3 }& w, [ j( V5 z百分比适应:
0 p5 V0 y+ X% z以下是引用片段：
" C' P- j. O# x0 ^6 \( ^' X) s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 I1 j. @- _/ e0 ?! I<html xmlns="http://www.w3.org/1999/xhtml";> 3 B4 p* M2 f$ N* N! z0 |; r1 d8 Y$ S
<head> * j! S" Q$ o3 p# ~! `' }9 G$ ^( j
<meta http-equiv="Content-Type" c /> / x U; q0 C: M7 w
<title>css2.0 VS ie</title>
6 R: L/ Y* r+ c+ n<style type="text/css">
: n, M" G- r j3 b<!--
& \; ^: c0 ?$ M( ebody {
; o5 K1 u* O0 v! k( m; b4 P6 w4 Tfont-size: 12px;
" A3 x2 w9 r$ B |- j5 `text-align: center;
, t0 | t/ P- Q' k# q% v" m* q" L% vmargin: 0px; 2 F$ V* q- N2 [0 i$ ^
padding: 0px;
( o# j; C# p# G5 K}
& P8 \& V, [1 A# r- n#pic{ $ Z6 [. Y% G2 c& R- J) P+ U. E2 {
margin:0 auto;
* J% S3 x6 c% p7 L2 T% z# \5 \ width:800px; 8 W8 c3 _' Q# ]/ \8 T1 y
padding:0;
# s5 J( o/ X0 Y5 r border:1px solid #333; ( ~4 b, G: t: O _6 j( t
}
" O% ~: Q7 I# z, l#pic img{
0 O% E6 g& K. w' t. n9 N0 U max-width:780px; : X# o0 F) j) Q, M6 v" {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 A% e. }1 k5 n% a1 Z. U8 j4 Sborder:1px dashed #000; D' c, {8 z4 q" p) ^# s
}
$ h4 [' N b$ K. g4 h--> . q# H1 x4 S- ~$ |* ?# f
</style> + U6 b. t$ U; ?, h) a: |8 m
</head> - i4 t I5 c6 b
<body>
, q: e2 D" \: \# E3 Z<div id="pic"> , M* n; u% P: R# k# ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; o8 d. o" ^- d- K. C</div> ; |! z" }1 A+ d
</body>
) L, [$ f9 `; |</html> |
|
发表于 2007-12-8 14:55
| 