|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 W2 Y& U b/ X4 M关键在于：max-width:780px;以及下面那行。
- e2 |, y" B' A+ s0 ~+ u8 t0 x固定像素适应:
2 r0 l# F2 R1 b3 [9 N5 G$ {1 [. G: C+ x! {2 m4 t
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> 以下是引用片段：
5 f9 W/ C6 w1 t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 ]2 `3 A- y$ d% l! p& X$ W" g
<html xmlns="http://www.w3.org/1999/xhtml";>
# D# K4 O7 f5 r<head>
. h/ L$ M, x) v- k1 [4 g0 W<meta http-equiv="Content-Type" c />
* ?) j, [9 I8 X4 t/ u<title>css2.0 VS ie</title> % o1 t% D1 d2 u* c
<style type="text/css">
/ C* \5 z( |9 K1 o; ^% L: d<!-- : ^$ c* o3 y6 ?3 E
body { 8 f: _# H- ^# d! \. N) o
font-size: 12px; ) s5 b8 w, d0 Q2 B9 e' ]" d6 O, w0 ~/ y
text-align: center;
' f+ _& m) T8 c5 i" r( h* _" Mmargin: 0px; ; ]9 F% i% z. A$ I3 x( x2 w; W2 e
padding: 0px; # d& X6 B0 v0 \, f
} ) H+ J- x3 }6 w* R5 f" l
#pic{
. s7 {, j% |+ X9 F5 G: ]7 v3 j margin:0 auto;
4 [& z3 Y+ m; l) u4 D width:800px;
/ R/ f0 ?* V j padding:0; ) q2 X# Z% o- i( F z
border:1px solid #333; , {5 z5 {6 A( E6 R7 p
}
; |! P; |8 i2 r8 l#pic img{
$ U8 s0 ~3 _% m3 U; B9 g" R: X max-width:780px; ; K! |- P( Z2 D6 \
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" _& {$ p' k% l# g: T* Xborder:1px dashed #000;
- d/ q# ~$ ]( B; j) _}
5 z# B/ P& \: o7 R5 B4 ~-->
) ]2 O2 z/ @3 Y: v5 {: y* c</style>
3 y+ J* J) {! b2 l8 I) R, N; Q- ~</head>
5 p; B- n" R. T" ?" q<body>
( A. \5 _2 U9 k$ B$ C<div id="pic">
( Z0 g. L t% q4 y9 P4 g9 m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , N' Y1 b3 J. S1 e$ v
</div> 7 ~! {, S2 O0 T) I; D7 }
</body>
6 _. S- G4 G u2 N</html> 4 V3 H! B& u1 u- ]3 e! x/ s
' h7 s0 r4 Z1 T Y9 |9 V. s# L0 m
百分比适应:
4 Z8 m0 W5 n0 n# y5 h% `以下是引用片段：
' J, D2 z: \7 ~$ V) j# l1 S. K6 D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' R3 ?! j7 x4 ?: K3 J% D) r<html xmlns="http://www.w3.org/1999/xhtml";> 4 j6 ?$ Z* v5 e
<head> . z4 T, R7 U) S1 P
<meta http-equiv="Content-Type" c />
! B: G1 C2 _/ k<title>css2.0 VS ie</title>
I& C1 @) f1 n<style type="text/css"> 6 Q! Y3 J' ~; P+ r6 I
<!-- " `# z2 s0 h2 W( ?2 e
body {
0 E X. y- U: y6 S+ s+ xfont-size: 12px; 0 W" e! m+ M g+ {5 e+ I+ ^4 P! K
text-align: center;
( J. x& f, K& y' @% z9 Y- Rmargin: 0px; - Y' U) t0 }: @+ Y, t
padding: 0px;
3 v+ ^1 B( p2 f6 }- _' s}
! ~0 d; h B ^( d3 V#pic{
! C3 I; j/ V( p& T7 p$ ~) `/ s3 B margin:0 auto; z" ^; |' L/ _2 ?
width:800px; & }4 |* _: a! N3 C' ~
padding:0; 8 I5 H. e$ Z8 B7 c# _/ o% }6 b4 K! R
border:1px solid #333; : ~: g3 J) J, p9 ?3 v
} $ C5 P- T; w3 F
#pic img{ & E p' m" Q9 q- x! f
max-width:780px;
: b9 a2 i5 P1 z9 ?6 Iwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 4 R8 @# |* e7 m0 a
border:1px dashed #000;
( y0 I6 ~7 y; q) x} ! I& s1 M! D: c- \1 I. L
--> 5 R6 E5 ?4 ~ m( M
</style>
$ L' G" ^' L; x. h9 Y# I( m* H</head> 3 y4 W! }, L7 y/ \( X
<body>
$ P4 f+ E$ t4 P9 t* J$ O<div id="pic"> ' e! @8 a" }4 Y2 Q8 ?/ z( U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 e+ o {! n8 F4 x% e: w
</div>
) L4 z$ {) [5 i, `2 ~& P</body> / s7 p% ?! Q5 g7 V2 b) T
</html> |
|
发表于 2007-12-8 14:55
| 