|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14321
- 金币
- 2446
- 威望
- 1647
- 贡献
- 1394
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。$ g3 H1 U5 I4 [7 U/ o7 O
关键在于：max-width:780px;以及下面那行。% R% n( o8 k8 f# S6 f: u7 a
固定像素适应:
/ ?; u! l9 S! i: M
. A* z4 k. x# H/ h* T, ddotted; 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# D' d4 }+ v& ~! n( V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( v6 R; e# c: a0 v) r<html xmlns="http://www.w3.org/1999/xhtml";> ( i0 T, y; n2 Y! E+ W+ x
<head> " ?# H4 m5 I, [, ~# E% U8 ^
<meta http-equiv="Content-Type" c /> + V% h8 s7 x) S8 B5 R) o
<title>css2.0 VS ie</title>
2 N e. K* ]6 P; c( y4 w9 c) ~) N# ]<style type="text/css">
' Z/ A9 H* t f1 ^<!--
. s' X" S6 K3 N+ u; ?body {
2 s" i8 U, R0 d! Y5 z7 jfont-size: 12px;
: V; f$ r- V$ I( ^% R+ `* E2 Btext-align: center; + [; X( T6 _4 \0 j
margin: 0px; 2 [. ?# o! g, S; ^/ W8 W+ M& T
padding: 0px;
]: W9 f; U# x. c' ~% z( I} 6 v4 E: n" R' q% }
#pic{
7 D- S) E; R% a- Y0 @. V1 N( D. A! a6 z margin:0 auto; * g; ]/ A# ?, h; N3 }. h+ x& X
width:800px; 5 h5 x- ?- ~6 L
padding:0;
( z7 E" O/ o5 h2 d- X border:1px solid #333;
9 J. Q: {% ?1 }0 ~ } ; t8 Z6 k1 ^0 r( ~9 P3 z
#pic img{
0 S6 \& H1 O! i max-width:780px; ! T( s8 K5 l3 [& B9 z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
$ M- x I6 _5 f3 @4 i. eborder:1px dashed #000;
2 }5 U4 g6 A2 n}
# e" t1 Z j |3 f7 z" n7 `: v7 l9 H% F--> , }4 r4 e# T- q- @1 r- n2 b
</style> ' d! o( ^ i, d$ t8 b
</head>
) j& R2 Q# o: v/ u, m<body>
T& j. V2 j/ R, n; H<div id="pic"> 1 {- c5 c) ?+ ~- G
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 l, O$ k/ X+ e. W6 t
</div>
- F# X) c! u& [</body> 2 V! M& B' i* a! d( U0 b
</html>
: f! k% ?, Z3 }+ ?2 Y- ]6 Y2 U' C \: @( i
百分比适应:. V f5 r" @; J0 V0 l5 J3 y) ]" M( b+ A( B
以下是引用片段：7 k2 x a9 d) P1 z0 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : ~. R; e- C# Y1 g6 d' \
<html xmlns="http://www.w3.org/1999/xhtml";> 7 I6 v, j; t, Q/ T
<head>
' {2 W' y; J- b x- C* Z# L<meta http-equiv="Content-Type" c /> / o3 v i0 P# G* u4 P: ^
<title>css2.0 VS ie</title> * r; ]1 f+ O2 e. U, F
<style type="text/css"> N2 C/ S J; _1 q; R
<!-- 3 X2 F- L E2 Q3 h, x
body {
: ~- N2 l/ z5 u, A1 nfont-size: 12px; * l3 U* [5 H% j- d$ Y* ^
text-align: center; 5 B" R( v" j2 n0 w
margin: 0px;
0 X2 m6 r* q8 v- Q L! w& B f- Ppadding: 0px; % k' a3 \- b8 J4 [4 O( j6 l
}
6 |8 ]/ d4 |0 A' n8 E#pic{
% K/ i* q* O3 T( }- w9 U margin:0 auto;
9 r( L1 w2 s H/ L: { width:800px;
! l* c; U- _ h/ \; N padding:0;
" Z. n* d# e9 q& P& t* \1 u border:1px solid #333; 9 s/ g. d) Q- Z' K; s/ M7 n
}
8 f* N% U# @8 L* E& u" N, D#pic img{
# b% Q" G$ p: [: g+ @/ I- ~ max-width:780px;
+ Q% e9 o! Y. [5 Y( gwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : U; q% ^* Q) _& x6 |4 l
border:1px dashed #000; ) n- {+ T0 r# I& c& m
}
5 ^0 q( z. T( w--> ! f* Z( I# |" v- O% d7 A) z
</style>
" x: [- X Y$ q+ y</head>
+ |5 A& }# f4 v k<body>
; N5 R# J8 N6 \8 F1 o: G<div id="pic"> / e$ m2 R+ X7 b/ d+ Y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ B( K+ f; W% l, T- @- Y( _/ t3 }; g</div> 1 r) s, q/ R* ]) v2 V! |* }
</body> $ q a; v8 K7 \" R- q; p* E u6 e
</html> |
|
发表于 2007-12-8 14:55
| 