|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14327
- 金币
- 2449
- 威望
- 1647
- 贡献
- 1397
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 v6 f" G+ t2 A( x$ B关键在于：max-width:780px;以及下面那行。2 d( W* b8 t' W, l
固定像素适应:8 e. w+ Q9 \- o ^
! D1 F& }1 e- F' x! [# 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> 以下是引用片段：
, n; p: J! l. g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 t3 @3 D ^* ^4 V0 x) |<html xmlns="http://www.w3.org/1999/xhtml";>
- N, {) c; f' b* ]7 R- Q2 J<head> 4 R+ M/ G" ] p9 z( \8 x
<meta http-equiv="Content-Type" c /> 1 N/ S, n( C$ Y4 A6 v' y
<title>css2.0 VS ie</title> $ @, [4 |# c( n# |/ }
<style type="text/css">
4 }/ H( O8 v6 p+ x: J& i! ~$ A<!--
6 O8 p3 K$ P# Qbody {
( a- j/ p; a- p, z% A+ N* Wfont-size: 12px; ) t0 o$ Z4 L' q& o# C5 u8 N
text-align: center; 1 c: o( A- r# `
margin: 0px;
6 \7 ^' g$ c1 _9 h1 kpadding: 0px;
e# }, i3 u9 @: e: Q9 s! s6 u, V}
3 a5 V* W# \0 X, H; y#pic{
% u7 _# q6 k: ~( D/ s margin:0 auto; 4 Z9 Y. t1 T* Q% m" ]6 b: m
width:800px;
2 P* U3 \9 j' s5 b* p7 M* Z padding:0; ( A E6 r% h& Y
border:1px solid #333; : t5 J6 C; `2 J: Q$ M, D3 b- F; n
}
1 q n/ y5 P7 ?' J# S1 y#pic img{ $ W* {4 ]& q2 v- P7 ]3 o0 S" ?
max-width:780px;
* g) h' N5 K% f: d6 Vwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
% P$ l5 |( d* q/ F' Z$ {9 bborder:1px dashed #000; , m' t( O g" k9 _" ?* \
}
2 Z5 I7 C1 F6 d0 x h I8 L1 w--> ) z, M/ t) o1 N
</style>
" T2 v) |# G6 P' r% `3 F</head>
; l$ ~' }; Z$ T; U& ]<body> ' S e6 U9 u( @
<div id="pic">
! j4 G3 ^* n& I' g& l4 K% S+ O2 l$ t<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ B7 ~& y" c* E: D. T; J6 R" z
</div> 9 m5 {5 `: R+ D' |
</body> 9 }; ?' _' ~: Z# [& L
</html>
( P% \7 A/ t* d
# b7 P/ N' n4 O9 i百分比适应:
1 s5 J' m4 W6 d2 a以下是引用片段：9 Z: Z, Q! E2 t+ o+ [: t6 W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% \# Y. ~% G9 q. O7 t<html xmlns="http://www.w3.org/1999/xhtml";>
+ Y% L C+ A9 x7 d4 V% x+ ?9 s<head>
5 P5 a c/ U* S* L3 t: O<meta http-equiv="Content-Type" c /> $ b2 @+ Z0 `* r i; Q/ [
<title>css2.0 VS ie</title>
/ k- n, g. P+ ]$ ~<style type="text/css">
' z z0 b9 h+ x2 p<!--
2 z& e- u4 @$ l( a1 l. p# vbody { 6 J7 \- e# q8 }
font-size: 12px; + \0 s& e- ~& n- ~/ x% k& M
text-align: center;
! g# S ?- q- `4 p l$ lmargin: 0px;
: U( k' f- ?. P- M4 a- Vpadding: 0px;
" @, ~% s- a2 n0 p9 `; k% x! X' j} . Z# A# h1 r- a, \7 U
#pic{
& x5 f7 Y; G% `: ]7 R margin:0 auto;
8 }6 C0 t, b& l& i. |9 W width:800px; # n6 m9 x. k: a3 j: X8 N) b
padding:0;
. q( G: q6 ~/ k, e border:1px solid #333; ; ?# n: D4 C5 u# @/ u6 I/ `
}
# }9 ~+ N' O0 |. r Q. @4 K#pic img{ . i- a3 o0 z1 M+ @! z h
max-width:780px;
3 H( D$ ]# ~" M, L/ S+ J ^; qwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) A8 o0 R& A5 H# Cborder:1px dashed #000;
+ C$ R7 k O4 b) R% _8 r}
8 T# A8 D0 v" q" }( g--> # ]9 w5 P7 j, b2 ]1 C8 t1 M
</style> ( a9 l* Y( d/ p$ ?7 F' S7 h3 B3 _
</head>
; X3 B' Y4 ^& ~" P3 V<body> 9 W0 x) Q, A% z# f
<div id="pic">
# f( n( Y( c* X- _* ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% c3 q$ c3 F2 ^# ]+ A) q& m9 n2 T</div>
* c7 S) b5 R. \- D$ G. W: I</body> 9 @, t, e7 X$ M
</html> |
|
发表于 2007-12-8 14:55
| 