|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14419
- 金币
- 2495
- 威望
- 1647
- 贡献
- 1443
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; g, X p1 [) u" ~( @" S
关键在于：max-width:780px;以及下面那行。( R: D f6 y4 ?6 y ^5 O& h. `! a
固定像素适应:
4 L7 V9 I; R# g/ c' W5 p: t3 C) V. x, T7 g2 K
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> 以下是引用片段：$ D$ V3 \7 H( Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( U' Y* c6 B+ V5 Z9 x* P0 i<html xmlns="http://www.w3.org/1999/xhtml";>
- z/ [- ~4 Y5 _<head>
( I2 r+ t* c5 J# M# A( f4 h<meta http-equiv="Content-Type" c /> ; P. y6 j7 \% ^1 I
<title>css2.0 VS ie</title>
* p2 h6 k/ A% Q3 |4 e: A<style type="text/css">
2 ^& G, h. l+ @# D2 s0 h& t6 M<!--
6 [6 O7 Z0 b O8 l7 @1 R& [5 M; qbody { $ ~$ Q3 l% V" c+ `
font-size: 12px;
4 I: }; S+ ?# l$ p& ptext-align: center;
) N9 F/ n! L4 `: K" W0 ~margin: 0px;
+ c) t3 O' c) p: Epadding: 0px; 0 p' Z; z7 B7 \' Q6 X
}
& |/ _4 E. W9 c s0 j#pic{ 0 Y+ x+ T% z: ^% x _
margin:0 auto;
1 M J) _3 D) W, i# }6 ~* A width:800px;
9 T# ]9 I+ f1 _9 I3 | w$ b7 p- j padding:0;
6 H/ Y" ~' M" J1 G8 M( X$ a6 l: p border:1px solid #333;
- G! a5 L' A' C2 A+ i } " ?8 P+ G$ _$ F) t. _/ p
#pic img{ . Z' M7 B- ^- y6 T& m2 i
max-width:780px; F5 |( Y/ l0 `* W/ o3 X/ t, h3 c7 L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
7 W# L# q0 Q3 U4 f! a) |border:1px dashed #000; + A2 m) L- Q7 `- j$ _: q- w* ?& U
} ' b" f2 Z- g& K
--> 9 V' D& f+ X2 {. D* E5 f
</style> 0 ~; \+ j! g4 ~" k% V3 Z
</head> 0 O) y/ `7 V, |2 X2 J: h
<body> ' B1 b% U2 ]# j. w
<div id="pic">
9 D3 @9 e6 C% S. A" P2 w4 ?* ]9 x0 L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ M& E, w( C1 u
</div> ; w6 I# o ]; O* T8 \4 y
</body>
! v+ D+ i$ u2 \* e$ ^8 ^</html> # U3 c, S* e% d6 U
# G- k' V4 s K' v0 `, o
百分比适应:
: l0 O; e; g; ?3 w9 f4 ^: u以下是引用片段：
" K4 g5 C, M0 R<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : Y- B" \2 ~& k/ W6 c
<html xmlns="http://www.w3.org/1999/xhtml";>
0 J: A8 W' s( C3 Y. \8 A3 Y<head> ) u% Y8 l) |# w! t" m. X
<meta http-equiv="Content-Type" c />
0 X+ d' r" e" p- P<title>css2.0 VS ie</title> 5 @- L% G( W7 ~& _9 K* u* j5 S6 ^
<style type="text/css"> & @) C+ S4 J. U3 t; d
<!--
0 a6 k: ?# Q% [9 j$ ]) s: ]8 Sbody {
& z; E' e5 H1 j9 bfont-size: 12px; / c" w' I8 v3 n% [& L W3 x
text-align: center; 6 `- B) e4 T- r" c
margin: 0px; 0 t7 b+ A8 E4 K0 ]
padding: 0px;
, `; O' S! H" S% B6 V/ S/ I}
8 d3 A- @4 s0 R#pic{
5 l( D$ g) m) i margin:0 auto; " s# O( Q; s p* e
width:800px;
9 F: N. U- k# m8 H- r9 x9 ~- R padding:0; " {& b5 W3 `! J7 Z3 H% j
border:1px solid #333; j, f4 ]: j; p1 V3 f7 z7 C- d
}
7 ]# R) D/ m7 R, b$ c7 w3 q( [9 x#pic img{ 7 }% M8 ]" L. B% J' @; `1 ?7 o
max-width:780px;
! L: a3 |- [# L% W$ {width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! e j/ h) P. Q7 g7 P& L
border:1px dashed #000;
6 r, ?$ b0 R1 p/ o8 @; y7 `}
# P9 S; b6 T" H-->
+ h& e ~) {- [ x" O</style>
7 e( m5 ~4 J, e9 t. B</head>
* F& r5 f7 v% h$ U. M/ m5 g<body>
0 t6 p# d+ c5 g; L0 U<div id="pic"> . y- H2 L( a0 c0 m7 W6 A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' n+ `+ S# Q# H</div>
; r" G- L* H O% G</body>
3 s3 b1 a7 l: x/ [+ N2 a</html> |
|
发表于 2007-12-8 14:55
| 