|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14437
- 金币
- 2504
- 威望
- 1647
- 贡献
- 1452
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 W S, u3 p8 h; `+ _
关键在于：max-width:780px;以及下面那行。
* B' c* `3 K6 a固定像素适应:
# J5 P" t7 q/ Y6 R4 a1 ~' G3 H3 S, E" c" I P' F$ {
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> 以下是引用片段：* R. v9 t, ]0 P7 M6 y0 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 m- |9 @: G# O' W" U<html xmlns="http://www.w3.org/1999/xhtml";> 9 t [! g" f' @1 h: G" A% S- G; y
<head> . K% z8 y% a. u5 R" V+ h. `
<meta http-equiv="Content-Type" c />
2 A2 [; L) t/ ?<title>css2.0 VS ie</title> O1 X) ]! c' R- j7 X
<style type="text/css"> 2 Z! i9 b2 ~8 w( b2 F5 A
<!--
: y7 ~- Z' A) L* j$ N: ibody {
0 r' g/ r5 j" W: ]) ^( O# yfont-size: 12px; ; h( Z7 I' ~; s; t% `5 B2 S( O
text-align: center; 4 W' ^" d$ ]4 A) x1 p! G
margin: 0px;
3 \2 S( t/ c% M% N' T) ^padding: 0px; 3 A5 u' ~7 x1 J8 F" R
}
6 w+ m/ p' Y/ H( ]3 Z#pic{
a/ J; Q* M2 l2 q! C% k margin:0 auto;
9 G4 V' L2 k9 ? width:800px;
, y$ @3 j% t, I: q; a7 k0 d padding:0; 7 L6 q# Z% s; V( e. a' V) G
border:1px solid #333; + w( e, A4 k4 I
}
3 K* l7 A7 h& I- Q#pic img{
6 N3 a/ T: C" z/ ?% y" n max-width:780px; 3 v9 I5 ]! y) K/ q _- R
width:expression(document.body.clientWidth > 780? "780px": "auto" ); * v s @$ u5 K: ?
border:1px dashed #000; 7 k& N7 a4 L' v+ i3 y! _
}
8 B; j: ?1 {, g-->
. d* G- ^' c) l. P# Y</style>
' f! F, d5 }9 K+ }</head> ; T. x2 q( Y' O( R2 S) m
<body>
& {0 `4 n: N3 J4 v1 X<div id="pic">
) j4 j' f1 ^% h' c, `* N( a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 X- @: H0 g) _6 ^% w/ C
</div> 5 I2 P" w. J, B/ [
</body>
5 s1 a1 F J$ [3 i# J1 S. r</html>
5 G+ ]" E7 w; K$ x$ V, k, @- c
1 M/ z) v" g$ C9 {* D百分比适应:+ F' q+ X% |2 f1 W* X: U" I" L/ _0 h
以下是引用片段：+ i) ?3 U2 K' v' B1 R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 h$ ]2 x1 a7 s4 o<html xmlns="http://www.w3.org/1999/xhtml";> % X5 o( q7 J- j! M ~
<head>
4 N% m! Y% _+ _' s* I<meta http-equiv="Content-Type" c />
7 M- f0 s8 _5 n6 K& R<title>css2.0 VS ie</title>
, ^* x3 k8 j7 u. y2 X) w1 j<style type="text/css"> 0 q& F i% l! m: @
<!-- 7 Y7 l/ ] K: Q2 {" b l2 U! K. j9 N
body { ( T9 n2 Q3 _2 J
font-size: 12px; 3 C2 ` i) c' L, c3 s1 g3 }
text-align: center;
1 V' w- ~+ {6 z8 d5 D8 ?margin: 0px;
* I' d9 f/ g- s3 C" Ipadding: 0px; $ S8 ~6 c. E* {9 j$ n+ n9 ]( Y
}
; l# c# s j9 [ q$ B) @" x% [, p#pic{
& O0 c; c3 `3 m! R* ^ k4 l margin:0 auto;
' T- |! A5 o5 \6 J; u7 F width:800px;
% m% S3 V1 y' D; B( W& L! a padding:0; + [& ~) _# I9 l6 p; Z) K
border:1px solid #333; - h# w; c8 J5 h& j
}
' J: X; f5 C3 _4 \#pic img{ 7 e5 R1 ^ R3 d4 | r
max-width:780px;
6 Z+ R4 |- {; ?6 s% Y! n4 J% i# Mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " i' m0 Q( F) Q4 j- c& y( |
border:1px dashed #000;
( v* R2 |7 Y6 D; z) W9 z}
, C3 i6 E* {9 a! l& {& ^--> q4 y, E7 U& i6 v/ ~
</style>
. z$ N5 n. q- X; y. J</head>
4 w# t" C& R+ c4 e: o<body>
. q Q. {# S9 _! m/ N) P<div id="pic"> 4 T9 q, K. d+ ^& ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ c" N: B% v9 ~9 F( K; d' u1 A</div>
: i7 K* N6 p1 f! p</body>
9 C: x' `5 Z- A7 L. j" s7 F</html> |
|
发表于 2007-12-8 14:55
| 