|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14171
- 金币
- 2376
- 威望
- 1647
- 贡献
- 1324
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, A- W7 h4 V( @% k, c- t; F关键在于：max-width:780px;以及下面那行。
& C& g0 M9 i5 h- _; h: q* G( i8 P4 i$ p固定像素适应:6 d% [) s* d- Q$ ] M7 P5 K
2 a6 r, Y3 f" S K& m: q! t _
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> 以下是引用片段：& e# R9 m( T( J. O, `3 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ @; N) P7 @8 E<html xmlns="http://www.w3.org/1999/xhtml";> c! I* h g$ |& Y8 n- y. T
<head>
. ]) d$ U2 ~# g0 Q p4 b- {<meta http-equiv="Content-Type" c /> % _/ Y* R2 {: D- D* m* }
<title>css2.0 VS ie</title> & l6 V8 y# C4 D
<style type="text/css">
' T. s* }: \0 _) A. t( `* o+ M<!--
5 Z/ q8 o/ M4 z( ~. T( _body { / f5 N% r& `- R+ K4 S
font-size: 12px; + W1 B) f% j8 {& r
text-align: center;
" y& h- J4 W' ~5 f8 }8 X0 I9 m( bmargin: 0px; * ?0 Q0 L% p7 R% Z) s; C0 s* d
padding: 0px;
9 W& m B- y E. ^$ b5 H# }1 g} 0 B) x% v' Z% h6 D" G$ ]
#pic{ 6 F. W Y# e+ v* q e: [# l' n
margin:0 auto; % H) \: G: X3 g' c9 [. I0 q
width:800px; ( v& Y( e& Y' y7 u7 B f6 C
padding:0;
6 B; h( C- @8 V z) Q* f, w- p border:1px solid #333;
6 B$ X( u s: a0 W% a% g1 V n } 0 l4 H9 s( D! C. D* q
#pic img{ 3 b3 b$ h7 o" b- u, ^& R* J
max-width:780px;
* P: @: y: l$ P% @+ hwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); % Z/ ~8 | I. j' _% [- G# Q+ {& w( o
border:1px dashed #000; 0 a: C( H1 ?3 ~, B( w
} $ H0 D8 T/ {/ E) G6 U9 ]8 T& S$ A' G
--> , t/ ~3 [' \+ ~9 g0 g0 k2 g# W
</style> 7 [1 t$ C& R8 I0 x3 K6 j2 ?
</head> ) D. E! z: o8 v( B
<body> 6 p9 o8 D: k6 q% F. P! j3 n4 i
<div id="pic"> $ H' y( k9 c0 X( o: ]- N
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 O- z8 |% ^, j: z7 f</div> 6 V+ F7 P- h: N( ?
</body> % q. R- M; q9 B2 p8 r7 r
</html> 8 P* W) U. ]; h' K* }
/ b! _7 k! p, A+ k+ R) c
百分比适应:3 O3 K& W$ q) J+ M9 h
以下是引用片段：2 s S* a G: f# [/ T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- }0 g/ _( f: x, c/ A<html xmlns="http://www.w3.org/1999/xhtml";> * s9 j5 k6 b# }" e0 q0 m
<head> 2 C" ?, L$ ?0 o/ x
<meta http-equiv="Content-Type" c />
8 \- i9 I' }# ] W; V$ c<title>css2.0 VS ie</title>
. U. x( `2 {3 A<style type="text/css"> : N1 _% s9 \6 ^1 ]! V/ Q* t! S
<!-- - W8 j) V0 U& [ B9 o1 [" u
body { 6 [1 H: V7 b1 ~9 W, S: k: g- V
font-size: 12px;
: |# Y# ~, q% E! _% D* H) j" gtext-align: center; # P# T5 P. D5 I
margin: 0px;
+ l/ R: b, A1 H5 M9 Vpadding: 0px; ( L8 y# j9 g: L2 z8 I v9 a
} ( ~9 {1 A/ _, a! s/ C( q' s/ o
#pic{
' k4 i' u( {& _' F0 N9 l) e6 U0 h; _* ] margin:0 auto;
) Y0 a" y3 y2 c) ]; L$ w0 ^ width:800px;
" W! w/ T4 F" T padding:0; 5 R( E9 G5 |! N
border:1px solid #333;
# W1 W& Y1 d {$ L( M& g: M } ' w3 r& a1 B! j) \3 D5 F
#pic img{ 6 A5 d. C1 v: l
max-width:780px;
) J8 y0 E- O/ K% A4 Q/ J4 swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 Y) @3 x# ?9 y% n; r6 P' Yborder:1px dashed #000; * e; A: v' q( \ C( ~, s
} + H+ [; f# l9 a! h6 R
--> 5 K8 q2 Y) X7 W! {
</style>
( u1 o$ }/ X* ]</head>
0 X/ F8 y9 u; ^: u) m<body> ( F6 s( {; x- T2 x) H
<div id="pic"> 0 Y! x3 q/ H3 r1 u. ^) C4 m6 ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % Y& J9 u: |. O* h2 t5 ]/ H
</div> * E9 k' o* @7 r6 ?0 z
</body>
i. M& O* G* o( E- L9 E</html> |
|
发表于 2007-12-8 14:55
| 