|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 l( d8 ]# `. K% _ _9 W% v1 C关键在于：max-width:780px;以及下面那行。
' W0 i2 e* f4 s$ Z1 M固定像素适应:/ y7 x. L3 k# c# a1 K( b: k4 ]
8 ? q; r) Z/ b
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> 以下是引用片段：
) G0 N2 _& l" V6 I( V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
y% h: L3 z, v) ]& }7 s2 _3 S2 E<html xmlns="http://www.w3.org/1999/xhtml";> : t* d' K3 k+ A2 y" c
<head>
' d3 Y/ i2 k# l; k3 A; v3 M<meta http-equiv="Content-Type" c />
- h p8 b' W: C9 ^ h! e<title>css2.0 VS ie</title> 2 {! b7 {2 S& q. I B4 O" S
<style type="text/css">
4 M4 p3 r# w3 n0 ~' ^6 h" D5 L<!-- - Y, p; y9 ^: B% G3 W; c
body { " ?, ]; e% [' |8 {( F2 W- O1 [
font-size: 12px;
3 F' w2 L" j2 J& f5 k3 {text-align: center; 9 }" K! L4 t3 I6 E0 E
margin: 0px; 5 A, Z3 }: s6 d1 g
padding: 0px; ! {9 F& h! C& U$ u% L7 `& Q
} 0 h. Q3 D* y4 F% r7 \7 q8 d0 f8 R
#pic{ 8 v8 g6 r6 H$ a; L) I6 ~" Q! X
margin:0 auto;
T0 l5 }1 `2 C- B; ? width:800px;
* k3 k; H5 t. h$ m7 i# d9 O padding:0; 3 U h: k8 K& |' N# N
border:1px solid #333; $ S, R! Z3 ^% A9 l4 I+ d/ v: Q, f) _
}
) m7 X* f3 ^" c: q7 ]3 L#pic img{ % z2 ^- H0 V* I4 E3 A
max-width:780px;
4 \. t" d* g. K6 \* ]( Mwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); / K! O4 P7 x% G5 ]# |. y0 _- q0 {, v
border:1px dashed #000;
0 e' e4 _, I( z0 q( B} % e# v! N. F0 j! t* V# K
-->
" D8 B7 s, Y& r5 g</style>
; d4 i! t" I* {5 ~- `0 ]</head>
' J9 K7 i: {) s" n<body> 9 S% ~& [5 F, ~' \6 Q2 I% a
<div id="pic"> ! v, @: `4 p1 ^1 e+ ~# Z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 M$ R* d4 Q3 m* q
</div>
( k" w1 Y2 G3 `# }2 m( S</body> 0 ^) `0 w, s6 y" |! g
</html>
& k' e3 o: V f" z1 W
$ i" M( @5 c L$ z- C* D百分比适应:6 [1 c' m( X1 _4 @- \
以下是引用片段：
^1 f2 s; m- W3 d& Y. n7 Y7 ^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; S% B0 P% R' v! D! i0 U/ s% A<html xmlns="http://www.w3.org/1999/xhtml";>
+ I/ _3 B# B, \4 Z<head> 3 {) T: ^* u. I( P6 j; o8 e5 N% U
<meta http-equiv="Content-Type" c />
9 s+ s2 W" q; f; {7 [<title>css2.0 VS ie</title>
& H; ^' A% o! w0 X<style type="text/css"> $ }- n' S3 s3 u8 h: H
<!--
8 u: b4 X$ k0 h7 `# sbody {
) W) [- ^% j o# a# P* z, H) K- pfont-size: 12px; + n; x' p+ k# M( y/ z B3 p5 _
text-align: center;
- P; T& n+ _& o2 f% v: j4 bmargin: 0px;
1 n- }4 x r$ t% u$ x4 |5 [6 x6 Ipadding: 0px;
+ c$ K$ D" h7 ]( C}
$ @7 T. s8 ?8 t0 ]4 x5 n" {2 I( a#pic{
* b2 |1 a' s& [4 Z% A$ t9 f O7 E margin:0 auto; 8 ^' I2 y- {/ n5 G" T7 w) F
width:800px; 7 G$ H4 ]+ a0 K) Z J
padding:0;
3 @' R" T8 ~: w border:1px solid #333; # u. P* ?+ S8 n! i C! A
}
5 F# Z% v" j8 B0 D& n#pic img{ ' k! `" ?; R' A R6 k8 @( n R
max-width:780px;
. y$ J/ Z9 m/ c! E- e) _width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; v7 G: ?) S8 W0 Gborder:1px dashed #000;
& P7 b4 A8 b& ^9 }# K- N7 g}
, }/ o5 G! D9 {) [/ L-->
- o1 {, }8 F& a</style>
1 r% L h6 w2 X/ G</head> 8 O7 \( f1 q+ ~" A; l
<body>
9 ~. {- Y. E# {" h( [9 Q% R<div id="pic">
* C9 Y) Q4 p8 ?: [$ @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# h7 ]4 d1 x- z, y3 M</div> 9 d( ^; L9 U# i+ n! B, e
</body>
2 _" f6 S! b7 x</html> |
|
发表于 2007-12-8 14:55
| 