|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 V" p& h1 m; v7 g" g
关键在于：max-width:780px;以及下面那行。
+ w9 c, {7 d) A8 S2 `固定像素适应:
3 l+ e4 d- @" T+ w2 D. j- `- f- ~7 h9 d
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> 以下是引用片段：7 u0 S, C" n% j: t& ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; j: N4 ]5 J6 q Z3 T5 U* I" W
<html xmlns="http://www.w3.org/1999/xhtml";>
^6 h9 [$ O5 e<head>
$ {3 {( `( T- X<meta http-equiv="Content-Type" c />
/ P, B8 Q) N, s<title>css2.0 VS ie</title>
) B( |( T& Q; F! Z, E. K<style type="text/css">
% {7 C; m2 \ N% t/ m<!--
# }2 U: h3 f& N' O3 ~body {
1 g+ g. R, p5 f! tfont-size: 12px;
8 Z7 F5 {6 y' g& v x" g$ A$ @text-align: center;
: u1 U- i% x( @4 V$ q: tmargin: 0px;
8 T5 @5 _+ V) \padding: 0px;
L4 }: a* O9 y4 A" K1 ]+ L} 5 F2 ^$ P% v0 \- d7 J
#pic{
# U; s% X/ P2 M5 {' Q margin:0 auto; 0 w, H; J" F1 C0 B( [& }
width:800px;
$ M. H2 Q* |% x8 L' G padding:0; + r6 I3 T! }5 ^" E6 o' r
border:1px solid #333; 2 y8 m/ ^/ V% `6 B) U; Y) K3 o8 G
} ! p9 Q. M y* z8 K8 H5 |0 \, R2 z
#pic img{ 9 T }1 C2 Q2 \0 w; d+ Y9 {6 E
max-width:780px; + q" `6 j( k8 E; [
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# ]2 x7 V2 K) k7 y5 W/ l7 ?7 xborder:1px dashed #000;
9 t+ X1 O% k; x}
8 M8 U& ~! ^6 x n: W3 \-->
+ b) p, Q2 [3 |; r+ R9 T4 X( z</style>
; x# h/ u4 Q3 d* ~4 }2 {% d/ M9 J</head>
! O( I& e$ @ h<body> 2 c1 ^/ D2 z3 A
<div id="pic">
& N; I |3 M0 z. m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 G% E+ J' C& l2 }; w2 E
</div>
' ~9 m: B* t) ~+ E, y: \9 M8 s</body>
+ [+ h- j4 G/ q</html> ( M. W* h1 w7 Y
1 f# {1 |' d6 I/ I9 q" m
百分比适应:
, H: n2 T6 K6 D' I以下是引用片段：
1 O+ E3 p. G, I+ `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ U5 L; H+ A( l- I, j! S7 D<html xmlns="http://www.w3.org/1999/xhtml";>
9 y6 Z) w0 J' v7 L; ^<head>
( f5 M1 b8 L- Q8 G: H8 \. M<meta http-equiv="Content-Type" c /> + ?! g' z1 b5 d( Y4 S
<title>css2.0 VS ie</title> % |7 t' d( o7 j. @6 u7 ?: y$ r; P; r
<style type="text/css"> ) P" C& C! E7 r9 J
<!--
6 a5 ^* x U% ~) }, c: Pbody {
# H$ i! ?: [3 P0 {4 ofont-size: 12px;
; I( S- |6 H/ htext-align: center; " b1 l. L( _1 @2 G0 B3 ^, Q
margin: 0px;
% L" x/ h/ t. a. x q! O: Npadding: 0px;
/ U1 z9 L& Z5 Z1 ]# l}
' o0 j+ o$ y" Q, ^) [' c#pic{ / C8 L. N9 N+ W% A4 X
margin:0 auto;
+ U6 } [+ D ]2 | width:800px; " d& q* Y9 h5 b2 l2 _( l7 e
padding:0;
- v5 v1 p/ @8 s A$ } border:1px solid #333; 5 M; L2 c" g0 n
}
Y/ K9 y g$ [/ h. L4 w#pic img{ ( N. \" G5 \* j1 I% M
max-width:780px;
+ ^. g4 i p4 Z6 p7 ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , ?. ?: O- x! F% [, D# ?
border:1px dashed #000; " m; U1 o; w" O2 y7 C0 e% U
}
. W, c- j! M7 X# t6 `--> ( @9 ~+ y) F6 l# [
</style> 1 W0 E8 X9 t. ~: w7 @5 I
</head> ( [2 x* D# \0 M$ S/ p
<body> . A# o, P" L* q* J
<div id="pic">
, E7 I. E: y5 K" k p5 ?( _" `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- h1 M$ ?* A+ c J, E</div>
4 w: X$ G9 Z% |</body> ' r, i* Q& V+ z. y# G! H! ^
</html> |
|
发表于 2007-12-8 14:55
| 