|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% M. ?! T' d- U* E4 s' ^' d. @- }
关键在于：max-width:780px;以及下面那行。. l& o% z5 L% B2 V; s4 G! R
固定像素适应:
* ^. A& X, b6 \# x) a* Q1 v1 k2 r/ L7 A2 T; R$ {/ v+ S$ ?: q/ j3 {- j' h
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> 以下是引用片段：6 I! W3 d$ h* ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 g6 a6 x! M" c' q; q
<html xmlns="http://www.w3.org/1999/xhtml";> ) t1 g' w% `. J" x
<head>
+ f" \8 R* N+ g% @* Z: \<meta http-equiv="Content-Type" c /> . j$ p) D& f! s3 W
<title>css2.0 VS ie</title> 4 s+ F; e! Z N
<style type="text/css"> 4 s# a% d2 A+ `1 b4 N1 r H7 n
<!--
4 f- L: M+ S" _3 ^0 D& Y; W5 gbody {
2 e3 C3 r6 c8 cfont-size: 12px; % f' n3 D, d/ x! X" `
text-align: center;
$ H( X3 E- U. D* ~% Smargin: 0px; . D+ R) M6 S& o- R' @% b$ j
padding: 0px; 9 q3 K3 P% G+ b( c
}
8 A5 ] u. n3 x; p) h6 s. M0 e#pic{ 0 T, p+ w$ a- W
margin:0 auto; 7 T4 o0 F: @0 [% e a7 z7 `) i
width:800px; $ K+ m; c; K" }1 t+ q: R$ ]0 _
padding:0;
1 g3 p' n6 X2 C. Z+ y0 |5 K* ] border:1px solid #333; . s1 C1 F Q; N+ s
} $ t: P3 i. q+ b7 [: y6 a6 g) z$ t
#pic img{
4 S* i: m, \& k& Z5 W: f max-width:780px; # Y; ^5 u7 q B3 ?# [
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 4 }& L- ^! U9 _+ A1 z
border:1px dashed #000; ) \6 ]$ f* C9 z4 t k+ F$ ]" t1 W
} a# @& @3 h' O+ ]* D1 g( ~
--> p G' S9 ^; m9 q+ w1 ?; e$ n
</style> 5 d w+ o) }" ]1 E' b4 ~: [$ Q
</head>
7 r0 ^- }1 b* }<body> ) q4 g0 s7 ^* m" R+ [3 R6 b
<div id="pic">
4 z8 M* a0 J- Q# L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 [. g( B, k' [9 ]: I9 ~
</div>
3 ^7 b1 k/ T# F; o</body> 2 e+ U3 y; z! X1 j" n$ |4 M7 G
</html> + @. j# \. _( K8 X
! P' }# v8 h+ c* f+ Q$ O
百分比适应:
9 I/ F X& e& }! ~1 b U3 D以下是引用片段：% S$ k; R$ u# j5 B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 ^7 k( n* h- z<html xmlns="http://www.w3.org/1999/xhtml";>
. J( h3 X1 [. [5 \2 [3 ` u+ {<head> $ A; k5 X, V% Y
<meta http-equiv="Content-Type" c /> 9 x& q3 o% X# c
<title>css2.0 VS ie</title>
8 a' b7 g4 v5 n: @3 b: q<style type="text/css">
# D3 X ]( z7 d* T5 n<!-- ( k* @' B4 \1 u0 a! n& \
body { ' s: `6 v- m7 m1 J0 x/ F
font-size: 12px; x; r& T* I! b( j
text-align: center; o- X2 e% u: [4 T# g; B( e
margin: 0px;
1 }8 b9 e+ j; e4 o) d7 \padding: 0px;
4 N0 v8 l2 @2 L} ( M) u7 h6 i$ e3 n9 h
#pic{
3 s! C0 }( Q- u d1 Y margin:0 auto;
1 t9 e; G7 u- a8 W/ o& v width:800px; 7 x) N; q) f7 x0 @: Q
padding:0; 9 v1 u& L& R; f+ w* j9 \
border:1px solid #333; 9 G4 T/ o `* V: x+ z
} ; [ j- S" v3 O6 i+ c& [
#pic img{ ! b- q) S' S4 S) ?! Y$ z8 \
max-width:780px;
3 C$ K; ]9 Z0 fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); $ p6 ~9 k: N$ \& B
border:1px dashed #000;
8 }. O* v; ^( v6 U! |: i5 _+ ^, ~$ G" L}
' c4 {" {" Q! h. S t- t-->
, i" L$ P3 r- V9 Q- H5 T</style> ) y6 @9 M2 Q/ s" j! X: z4 h
</head>
3 X% Y* p7 N1 f9 y! t0 ]4 U<body> ! Y3 R1 t/ C! h- G9 z
<div id="pic">
4 q$ I: E" X' k1 q' r2 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : N) b) u- }6 m$ i O( E
</div>
2 b" D' T$ O# j* K</body> - n R \; v3 E* O6 b
</html> |
|
发表于 2007-12-8 14:55
| 