|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14393
- 金币
- 2482
- 威望
- 1647
- 贡献
- 1430
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 I6 n @: x2 D
关键在于：max-width:780px;以及下面那行。; g# H! J, B+ V: i* o
固定像素适应:
( ~% T3 j1 y- q# z* g$ U( h1 t. V: H5 d# u0 J g$ C
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> 以下是引用片段：
. S. H# l! L+ R, D/ P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 V+ F+ o- E5 U0 f/ T
<html xmlns="http://www.w3.org/1999/xhtml";> 6 a1 k$ r4 z- s
<head>
) \) S& k3 G- r: T4 @) J2 `! A<meta http-equiv="Content-Type" c />
+ W' E; p7 o2 f5 x<title>css2.0 VS ie</title> 2 s" {/ n8 v3 P4 D2 |# K' p
<style type="text/css">
; s4 I( `1 |; b+ q. _$ n<!--
7 [$ r1 Q' Z: Q2 H3 U/ g2 R% f. Kbody { - K! n m. @5 M! u" I5 C
font-size: 12px;
! m1 y& r3 R% l, btext-align: center; & ^! \& {2 ]2 _
margin: 0px; ( { }+ Z1 c4 H9 G( L5 P
padding: 0px;
3 ]" Q6 |8 X& k) H! g} # t4 ~% H/ Q4 D8 K3 J& [4 ?
#pic{
, u$ X' R( N- j+ F! s- |" f6 H& U margin:0 auto;
, J% h+ g5 U' b& g2 I width:800px; g9 A. N% o l' }0 Z3 j
padding:0; . t) Q& j0 n( ]
border:1px solid #333;
D$ D- X$ Q/ H( U } - ~; o" c: [ R/ O& o2 i
#pic img{
1 D; S7 N) }& q8 d0 f6 ~/ ^, E max-width:780px; 3 r& h2 ^9 D# t4 p5 c0 x( N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' Y& k- d4 I( h; y8 tborder:1px dashed #000; " p, e7 `2 Y9 N2 M3 }. }' T; }
}
- N! |) M1 U! ]- b) s0 q8 T-->
$ y+ x0 v0 j% E( |4 ~</style> & L$ a0 q! x. x# L* r
</head> ! t4 o. N/ i0 h" T# ~) _9 m
<body>
2 P$ v: v$ M3 B, K<div id="pic">
$ E5 P5 o4 L5 `4 W( h# d<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" [& k" N9 H( N* g: d9 p</div>
' ^* _! R- D9 j$ K# [</body> ! [; Y: d2 t6 B+ ?
</html> 8 b k) j& H& h7 S3 b5 O7 ^* e3 j
5 [' m; G+ L5 p) l9 Y, H, O百分比适应:' D' K) b) f' A& ]' V {& l/ F9 k* I
以下是引用片段：
- A! y9 S3 B* h- Q4 _" Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& o8 [/ f. ?0 k<html xmlns="http://www.w3.org/1999/xhtml";> P/ @# n, G) m
<head> - N+ K7 D3 {% M# ]$ C2 R
<meta http-equiv="Content-Type" c />
7 s/ n* [4 D9 Q& j% q. t<title>css2.0 VS ie</title> - k9 O- I0 l! z3 O; e; V
<style type="text/css"> 3 }. i- K: c- A' e
<!-- 5 \% Y0 a. _; c9 |! @0 B9 O$ A. \( A
body { 8 v2 a: d' \7 ?2 {: {' L. ]
font-size: 12px; , W6 F- Q5 }5 L. L. z( _5 S
text-align: center;
: g, R% |- H# `- H, dmargin: 0px;
3 ^, n1 K) e: S$ K% f7 `; Ppadding: 0px; ' t/ O4 w; P$ m' A6 p
}
! O7 |3 ~0 \) k" c6 |, h#pic{
6 v' } |; t( F margin:0 auto; . E5 O' i- H2 `
width:800px; ; m7 D8 M3 M. Z" _5 k
padding:0; 6 e9 ]! C8 U2 o! e3 ?" w ]
border:1px solid #333;
: f% N/ f6 @$ O- Z G } ' u+ v$ X5 B6 I8 k& V: i' l
#pic img{
$ P( ], [+ W% Z7 |2 t5 K8 O0 q max-width:780px;
6 T: f# ^. G' Q6 q! s' F- Lwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2 R: p; s I2 f. b+ R" L {
border:1px dashed #000; 3 j5 T( @+ n5 r. o0 u
} + i% D( F& g5 O2 x7 f/ D
-->
0 \9 ^: o. Z3 W</style> ( V+ B! b1 T w
</head> 9 t& a( z; g1 W7 w( `- v* q
<body>
# t) D. I4 X; y: F( a<div id="pic"> ; A& O: _4 ?, }1 ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + [1 x$ u9 @) u2 |! z/ b
</div> * a9 F% V$ ~$ L& i! U" ?
</body>
: h* i' ?( r1 t. I0 w+ W</html> |
|
发表于 2007-12-8 14:55
| 