|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14403
- 金币
- 2487
- 威望
- 1647
- 贡献
- 1435
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' {0 e0 B9 V" H. y& L
关键在于：max-width:780px;以及下面那行。- f3 y0 y* u+ b& Z; @1 G" E1 h
固定像素适应:
5 i' M' w9 Q- Y* [# d) p. T, k+ H; U1 j' Y; H& w/ T- e
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> 以下是引用片段：* `- `9 Y. G* G8 `1 J) ?* k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 Q. X& v" i+ e* Z% I1 g; f3 h
<html xmlns="http://www.w3.org/1999/xhtml";>
9 H# z% A" x6 j$ a4 x<head> . t+ a0 m* ?2 d# d! K% s
<meta http-equiv="Content-Type" c />
+ B# J/ t$ P" K- p1 d# f<title>css2.0 VS ie</title> / e% ^0 }" b# \$ j/ L
<style type="text/css"> & p5 y0 h' o9 T! z+ F
<!-- / n$ O0 |- V3 H9 w8 \
body {
" ^3 f' V* y6 B1 @font-size: 12px; * ]4 y8 F8 u# j
text-align: center; ; n0 g: w4 {( ]& F8 r& Z
margin: 0px;
+ e' o/ ~ J3 cpadding: 0px;
3 X2 g6 j( ^7 b: A I} $ I% F5 E. }; A) p
#pic{
1 K/ L, @$ X8 g/ \ margin:0 auto;
7 p) V: d" K' r width:800px; " ^8 B8 l2 y1 Y, J4 t% R- r/ i
padding:0; # L3 T0 N6 P# I2 P; s7 b
border:1px solid #333;
% n& L9 h5 p1 ~6 s+ }5 X0 b } 9 N& l( y1 m# k Z
#pic img{ 5 L V2 L% Q( L1 ^3 v- T) b! I" Q. X
max-width:780px;
8 `5 m; c+ }$ f# o; T) H( @width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 L/ K& h; ^' d. r5 [& p- Mborder:1px dashed #000;
* d' |1 q8 q' ~- m2 c5 |0 a}
9 E/ q4 N9 o. M5 Z" e--> 4 I! k0 h1 K8 U' C; O1 Y) a
</style> 1 L& N' s% L p0 n- W
</head>
1 j. e! N* C5 x4 L- W<body> 2 q) |( s }( G# O: _* _5 ~8 f
<div id="pic"> " `( c# z; r& w; I! q# T1 n
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 n W' f0 }- u
</div>
8 B* G+ g' ?: y) R</body> 8 L9 |# F( O1 W/ d0 {: W
</html> $ p! v# E# e, v' c
6 o9 S8 f1 f, }8 J6 R
百分比适应:) F- `5 R( B8 L& I6 t
以下是引用片段：1 ~% B; K- j5 g3 x+ l4 T: r9 T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% `7 z) Q |9 U<html xmlns="http://www.w3.org/1999/xhtml";> A" U' [3 O! ]. ~/ r' F
<head> : a8 O" L5 X( i- C! O% f
<meta http-equiv="Content-Type" c />
/ z& L+ v8 F; [- L$ P+ }; ]<title>css2.0 VS ie</title> , H/ j; B4 y. q1 f. T8 \
<style type="text/css">
* T7 O1 E6 U6 R; ~<!--
, n: B% e& o" K# x3 V( v% Ybody { * v+ Z1 }2 S5 Q& {
font-size: 12px; ) h* ]: l% ?6 X! `9 W/ ^
text-align: center; : i" D5 M2 y/ V' m N$ b+ l# Y
margin: 0px;
1 C+ c" @' n5 d" b6 zpadding: 0px;
8 ?; J, r# }9 G! R}
0 D; a+ j/ M- b6 W- S#pic{ : ?+ q& I/ h+ M
margin:0 auto;
) \& O: d! e/ C$ q* f& P- _' E) B width:800px;
# m/ R C4 O6 I0 I$ z8 b$ y padding:0;
' L* ?' F, _9 \ border:1px solid #333; 0 i# E) X' ?. v' J! ]
}
* \7 r, o- B/ D% X+ F#pic img{ ; `( A1 O2 x w/ i
max-width:780px;
( X9 E9 ?% x! e: m6 h9 B8 M' Uwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ( |! l7 V/ E: _* u/ }
border:1px dashed #000;
! @/ F0 O$ }3 S( Z4 K0 A}
/ h* h' ~+ C, @--> 6 c7 w" x, A6 ~8 H/ c; D+ }# Q1 i
</style>
. N+ U; U- z! g: |7 g4 P' @</head>
& X! D) i& f v( m1 u<body> 0 [: E( z# H: I1 {
<div id="pic">
7 e. H7 Z0 x3 ^( s<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' v0 T! h# u$ I7 s. G</div> & O1 _& e Y2 f' E
</body>
, q: J4 @+ ]7 ~1 y</html> |
|
发表于 2007-12-8 14:55
| 