|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: b# Z! f X x& j9 Q
关键在于：max-width:780px;以及下面那行。. i4 K! i6 J" U% x3 Q" |
固定像素适应:
2 c8 s! t: V' M" ]' q' o# S$ ?6 V e
2 N' ]) s9 [# Edotted; 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 E2 J; A1 W& U" j3 U% r) E' M<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + D. v% H; ~- [! O6 J. `9 |( K
<html xmlns="http://www.w3.org/1999/xhtml";>
" S2 L% `6 _1 T<head> 8 I- X# Y& W0 K1 E) W: E
<meta http-equiv="Content-Type" c /> % g$ K" I' ~6 u" ]+ j: n
<title>css2.0 VS ie</title> ' z6 ?4 p) |2 B8 F6 Q
<style type="text/css">
1 K* H) a* B$ U3 x<!--
6 R7 D: O8 ?, l/ F( c2 Zbody {
8 s4 D" n- g. p) gfont-size: 12px;
. s8 ~2 u" E( Dtext-align: center;
4 i4 Q3 J9 u' L6 q- Q% w" p2 Omargin: 0px;
0 U& Q& M. X$ }+ u& Dpadding: 0px; $ L2 l) V% z) H# _
} : ]5 u' M" @& @ ~
#pic{
/ M$ Y) A$ c7 B4 |; G8 { margin:0 auto; 0 T3 H# I2 W- S3 D" K1 M
width:800px; 2 v" D) i- ~) J. d0 d1 j3 @
padding:0; 3 G V8 p2 g1 ]
border:1px solid #333;
- I* L6 a3 [" n# U8 ` }
8 U5 m: C8 ] a, e- u#pic img{
3 g6 O8 f( k/ R( D- T8 t2 _ max-width:780px;
8 X z' Y5 \7 |% M8 k7 Wwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
' Y; h' O% F% m- vborder:1px dashed #000;
9 p8 Y* \0 v X7 L$ i2 q( o}
; n* G" m+ K( K* ?* r( z. K2 t-->
~) ]! c3 Z- k</style> ( L! e) V& f" I+ A I+ m& j5 b
</head>
1 A K1 y. m$ ]9 D" A<body> 1 E' W* E7 J1 r( E0 u/ k
<div id="pic"> 2 g4 K- Z+ T, s& A# z+ q2 A# ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! a5 R. J: s& l" H/ e8 ^3 m
</div> 3 y6 Z6 M! k* \- a$ r" M! S
</body>
: {8 J: Z* Y, f- j6 x$ d# U</html>
- t& ~( B& G7 ^; z) v3 n; `6 `8 h# e7 B6 C1 V$ n5 }1 [
百分比适应:
- z6 v/ C' h: a以下是引用片段：. s2 M) Y, ?# h" m0 R* x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 t% u. X3 u) e+ l" a' A! F
<html xmlns="http://www.w3.org/1999/xhtml";>
2 p6 u- ?! s4 D1 d% Z4 Q- O0 D<head>
$ d P8 r& y2 O: r/ o<meta http-equiv="Content-Type" c /> 4 @$ I0 O" b) R8 ~9 S6 h+ f4 C* H
<title>css2.0 VS ie</title>
# N6 i, n) z; w* ~+ f" _<style type="text/css">
9 w0 N- W$ n. G _3 Z1 [& }* B5 i<!-- 9 w, w- T6 C8 P1 U. a& e
body { Q( B0 l2 |. J" l9 }: _
font-size: 12px; ) `; Y& ]9 ~) Q3 _% Y s, I( \( K
text-align: center;
$ t0 k9 ^6 a+ }5 W/ e" C- a7 Tmargin: 0px; ) Q5 `& ~" [: S$ Q$ y% w1 j. t: F9 x8 ~8 F
padding: 0px; & c$ k8 P7 n ^4 S# b. G
} `& N9 E& B7 F2 W
#pic{ . \# r, ^6 F$ g: M
margin:0 auto; ! c' h5 e. N! X# a9 n: b
width:800px; ; _+ {/ y" Y: R+ @$ m
padding:0;
# p+ R% @" z2 i$ Z border:1px solid #333;
2 {3 m+ L, z7 z* I }
* X$ u2 [ z$ T4 b% s K! ~#pic img{ 2 K, G6 l. P% A. v0 Q
max-width:780px; ' B2 Z$ d- U! c5 M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ `1 x0 d& I9 ^* dborder:1px dashed #000; 9 H0 J6 J4 r: ]4 y; |" R h
}
( z# i6 j) v# o ]+ R--> ( m: e: Z0 C" @" `. o
</style>
; M; `6 ]: h; |- H$ @ F" b% E</head>
4 i* O) d( t; a5 `6 t<body>
. S% |5 c$ C" h5 h" N<div id="pic">
, J6 }$ f/ ~: {6 p7 G# f2 [1 U% U<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 V5 Y( F7 s# g' `; p, _
</div>
) G4 b; e; E5 `+ J0 I</body>
T/ ?% N) W% |8 i5 I3 C</html> |
|
发表于 2007-12-8 14:55
| 