|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。& q& y1 c) \8 j) h) `8 P
关键在于：max-width:780px;以及下面那行。
! Z8 ^ T/ c" ]" z2 f固定像素适应:
1 V) _% X5 ]- x$ {$ z
$ j M6 c; p. N5 L; Y' p; ndotted; 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> 以下是引用片段：
( Q0 C4 _4 ]% @. o9 O<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 E4 ^6 n1 g& a<html xmlns="http://www.w3.org/1999/xhtml";> ! N7 c& R- @' k& Z+ ?
<head>
7 v! w* s" ~4 l3 n2 |+ | \<meta http-equiv="Content-Type" c />
% W3 F' E- [" I2 ]+ K- ]<title>css2.0 VS ie</title> g, C; @0 _3 k V1 B6 t
<style type="text/css"> 9 o1 o' p! _; h7 v2 Z8 n! H1 @
<!-- ; u" [4 |5 M$ x- m- p
body {
8 ^3 X. i7 F% n+ ~* t2 k9 i6 q2 m- kfont-size: 12px;
5 x$ M" K* |2 g" e, itext-align: center;
& K! q' }0 `# V& t2 z! P6 lmargin: 0px;
# |) Y8 z0 Z( Rpadding: 0px; 1 J. }$ W7 G0 G2 P l
}
* [. R. _2 `, X" ]7 P#pic{
$ j7 v j4 }/ j- G+ w5 h margin:0 auto;
% x) y/ b$ h! z) W# q width:800px; * T9 F0 f1 l- q# S& K/ c+ z0 C: w
padding:0; - v2 }+ ]7 L- p: v1 \( }' n* i
border:1px solid #333;
( [" @3 _- ^& V7 X- E } $ a' {1 ]: z- h- l" P% K+ A2 B0 m5 S
#pic img{ 1 @9 ?! s8 `, T- ?5 @' v0 G
max-width:780px; & V _* [1 G$ x: @9 C, G9 n
width:expression(document.body.clientWidth > 780? "780px": "auto" ); % {5 i1 s8 B$ @5 ]* Q
border:1px dashed #000;
4 s7 G: @1 W) Z1 |7 a. i} 6 w4 v c- I4 B/ R- K
-->
2 t# u5 E x% Z7 ?5 {! b5 r5 S</style> 7 A: X% W. o P, z5 M* d; g
</head>
2 g1 y, Y1 F F. t/ l<body> 4 e7 n, g4 s4 Y0 G* n
<div id="pic"> . Z# S, Y* P3 U( R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 w' L8 r+ I9 L. T2 R; d W6 W1 _
</div>
2 w# k5 R0 D! @4 z</body> ) k8 a8 c4 e* k, o# ]( y
</html>
5 J0 z, |/ B& y4 D& E( r9 F: p6 a' d/ ~" A
百分比适应:. n7 ^6 O! H h" Y. F- g2 H% z ?
以下是引用片段：9 O; n, c! q7 }0 p6 f% x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) y5 d1 ?& O' ]& k& Z! U- B
<html xmlns="http://www.w3.org/1999/xhtml";> 0 K+ K( M* W! V% G) X- C p! p5 R
<head>
' M8 R2 I$ K6 {! H: f" r) z<meta http-equiv="Content-Type" c />
; ~0 y' }; i3 z x( E5 n r. q<title>css2.0 VS ie</title>
! A* V7 A% K$ C" |, P: W<style type="text/css">
+ M2 t" F3 q) f! c<!--
# B X3 D5 v6 ` r% s M1 E8 E( ~body { y, z- d Z$ q( Y1 d
font-size: 12px; % T, l8 }4 h6 T/ `3 S& `4 Z
text-align: center;
4 d- I/ M; i% `1 v3 c, Imargin: 0px; ^9 C& t4 y. t
padding: 0px; ; W" w) [# V0 I2 a9 J1 M* X
}
6 _+ ~1 M8 X! b: Z( X) l. Y8 T t#pic{
% o; | }* o. ~( k% L% ~ margin:0 auto; $ b3 P* m ]- e
width:800px; 1 E) X" f; L! z4 A
padding:0;
* D1 j4 d# R2 @, U border:1px solid #333;
C- e6 W }8 b1 e, o9 E4 S' i }
, k/ ^- ~' u2 J- R% B5 t" @! A- C#pic img{
: a' @, G$ J# C1 ? max-width:780px; 7 b' k4 [ X! a9 f% ?# ?. c" r0 _, u
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # u* I6 q# c% f$ N9 ~ n6 J5 r8 N
border:1px dashed #000; * @% v+ d( B' d, X
}
$ Y/ y$ p. k7 u# | p) m. E-->
; g+ a% m- K! D# {6 h</style>
% r& }7 x+ L# B& T9 t8 V, U: l</head>
/ M7 o# M/ q) U! H<body>
2 k/ ~& c- Q# g: c0 @. Y7 T7 b<div id="pic">
3 o% F- D3 _$ Q& m/ b q7 L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 n7 h, D" C+ ?9 @
</div>
/ t8 N& S% V V1 h7 _3 F</body> ' a U+ Q0 J2 L9 k! @6 R
</html> |
|
发表于 2007-12-8 14:55
| 