|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14249
- 金币
- 2415
- 威望
- 1647
- 贡献
- 1363
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
?* ^( @3 i: \6 o% j/ G% w关键在于：max-width:780px;以及下面那行。
h9 }/ t$ _2 r2 T固定像素适应:
- p5 D+ f( Q" U# a
+ E. S9 V D9 G$ G. Z+ K" Kdotted; 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' P/ F& t; y& P8 _8 N# @7 c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& }4 v R) K4 N, t/ p# m<html xmlns="http://www.w3.org/1999/xhtml";> 5 F; i+ e9 X& o; Y
<head> , E( a t% m3 ?% d: q0 J
<meta http-equiv="Content-Type" c />
! h6 t( ?( v& m! H4 L<title>css2.0 VS ie</title> 2 Y0 n2 t4 z a7 l2 x! A
<style type="text/css">
# M9 t" K; `2 w/ ?* `<!-- 4 _8 q U) M/ _ \
body { # l: g; b( u' W
font-size: 12px;
9 Y9 {% b& [) Z. Ftext-align: center;
- P* W0 T1 P/ W% m0 Cmargin: 0px;
# w" L7 J) n" K. H! Apadding: 0px;
4 I6 K: h& x7 I' X: a; p# c}
0 R7 r4 U/ [7 p+ X#pic{
! D" W( Z. G# r8 o! J margin:0 auto;
+ D8 F9 u1 }7 ~& C, a4 D5 e width:800px;
N8 H. ] K* P padding:0;
# z" X! y H* t% k border:1px solid #333; - ]/ `3 B& e2 _) K
}
( A4 P$ A5 H0 e1 c6 x#pic img{
( c4 U. y) D3 j max-width:780px; " c9 ]6 t) P6 q( T# l' q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 B3 I7 w# z1 L R! dborder:1px dashed #000;
+ W5 M: e Y' s/ P; @( c0 J} 4 ]' f. p5 b8 ]* i8 K
--> / C o, _& k* I& h C1 `" N% c; F
</style>
9 k' p# }# n. r$ U u. K# D</head>
/ T% u! o5 s' w7 a8 l0 c<body> , h: o4 M. B8 D$ C( ~
<div id="pic"> % Q* r5 s- Z2 M* q3 M0 A' I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & k6 i4 Z2 c4 u3 X6 z/ G* ^8 T* m: {
</div>
* r7 ?- l7 R" B( N1 q</body> ( v/ T$ c. @2 H6 c S$ v S
</html>
1 W1 }- D/ Z' C, z4 M7 p$ D1 |
9 T2 U$ _- W; c8 h百分比适应:/ q& s8 q' `! e; }6 P6 b
以下是引用片段：
3 \/ |9 h& _" U. y% s<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
@( ~1 K# R6 w6 \, z% a, G<html xmlns="http://www.w3.org/1999/xhtml";>
1 t3 F L! ^9 R' w$ F<head> ' ]. Z/ O4 a9 o/ {/ Y
<meta http-equiv="Content-Type" c /> ! c+ J; @5 O, A* S) w* o2 U
<title>css2.0 VS ie</title> * J% `& |) ^' A& `4 u
<style type="text/css">
: w/ v/ v8 [/ A5 C# b0 k9 P<!--
7 ]6 j2 N' L. ybody {
' c! I6 ^, |5 r1 l+ H8 U/ A7 F: n- t9 Xfont-size: 12px;
" m' M0 j* Z, p( F0 O! N) e, g3 etext-align: center;
% h/ B$ q, ]0 y5 [! X% A6 }6 c% Mmargin: 0px;
- B0 A- ]0 d: b# U+ @+ Hpadding: 0px;
2 l: k$ G P& `$ ]$ Y+ J}
! J1 X1 L) h+ u+ R#pic{
* G0 j; @ G+ o) f6 S1 F margin:0 auto;
/ \6 q) D5 q- ]% H width:800px;
5 Z/ R# P( O' @# Q0 U( ?/ i padding:0;
& w$ S3 f& M% A border:1px solid #333; " K( S' V8 V/ j/ F, e, u5 a, V
} ( M$ p! Y8 C& E0 L% G
#pic img{ 9 L; N+ s8 a: G9 q5 L5 g; _* L
max-width:780px; 4 e; A" v" Z0 y- k; N4 }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% o. x) U7 d" ^* |% o* a7 xborder:1px dashed #000;
/ }) o+ B4 v/ O+ s% V& K% I} 6 i6 h- _$ |: B
--> 0 R: t/ D, B, j0 j
</style>
: q9 t5 d' }* y& f, {</head> 2 @+ i( b7 K, K: X
<body> ; l2 ]5 L6 P! M9 N
<div id="pic"> 1 e' z( W2 o1 u
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / w; R4 a/ d7 K( B/ q
</div> 9 C) q2 \4 v: Z& j( U# e
</body>
2 O& S7 }9 L4 {</html> |
|
发表于 2007-12-8 14:55
| 