|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14359
- 金币
- 2465
- 威望
- 1647
- 贡献
- 1413
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 L% V* u1 D/ L关键在于：max-width:780px;以及下面那行。
) J+ ~% e0 B; W5 L) j# U固定像素适应:
/ n+ d1 W- o2 p+ A& }" \, ?7 f6 x6 v+ z( W. _1 V' C; U
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> 以下是引用片段：; x, T9 e0 P; R! j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % k- k9 d! u* L3 v4 o' w
<html xmlns="http://www.w3.org/1999/xhtml";>
- L1 a; t* n% j! f) o<head>
6 a% `, e) q* x' c3 `<meta http-equiv="Content-Type" c /> ' ~2 l$ U* O! ^- C
<title>css2.0 VS ie</title> 4 l# i5 ?8 D9 Z/ W: I
<style type="text/css">
1 h; e& [* O% t, k6 C# P<!-- 5 V; S( ^+ }4 a% T4 J/ E! \
body { & r0 ?) W3 s. `8 |+ b& d
font-size: 12px;
) Y0 B L; w2 Ftext-align: center; 5 s) V' F! `4 v" R! v1 r% W
margin: 0px;
0 y6 g, o+ y) W* ]7 m8 p; Q! J- npadding: 0px; 3 i" K7 W& Y8 E8 W u
} ~$ k P. {. Q' U, ?
#pic{ $ Q# z) f% T2 R0 w4 Q( d
margin:0 auto;
* w% I$ u5 k* I5 D" @, [ width:800px;
8 a6 v+ I, J6 j @" ] padding:0; ' v2 o+ {/ o8 B2 F- M
border:1px solid #333;
1 Q, u5 {- X& D _9 c' U1 v& x }
b }8 G$ [+ o' G! h7 Q#pic img{ & R5 c+ q$ ~4 m
max-width:780px;
) B( d* e7 {: N- `width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 [, E1 t f0 e: ~2 l- Z$ c" |border:1px dashed #000;
& s( }, M2 _. x/ d} " u' [* d& P7 E+ U$ q* y
-->
, F+ ^7 {! I( W8 h</style>
" \1 |4 Q$ K! n, A- E4 t2 q1 c</head> 0 r/ i/ g4 d: A4 m4 s: t
<body> 8 \8 E6 V" [' D' W( A/ P
<div id="pic">
6 R# e7 h4 I" T& q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 r4 m* r8 x/ Y: s/ V- \</div>
* d: _0 e7 a Z& O( l- f- h, i</body>
! D& _; v n: w* f: R" ?</html> K9 F) R& w A; G% _7 I
, z Z) r8 w' Y- k, N" g' W百分比适应:
4 E3 {. E/ z. P* j$ r/ f- \) S以下是引用片段：. |- ?: Y# O0 S1 C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> e+ O* R' M6 p% c$ I9 f A8 B9 r
<html xmlns="http://www.w3.org/1999/xhtml";> 4 Z+ M7 W. [5 v3 K' x4 \) A
<head> 2 h: i8 |6 h7 _9 R+ g3 N" g7 i# m
<meta http-equiv="Content-Type" c /> ( ~2 X1 v; G I) y8 t; @
<title>css2.0 VS ie</title> 0 k/ D' W. Q6 R. z" `
<style type="text/css">
3 v9 m' }! @ V8 V: `- y<!--
1 P9 c h+ G5 ]body {
$ H# @4 ^( s0 G w- k! Xfont-size: 12px; 4 t& m" u+ i8 |2 t% o% h
text-align: center;
0 |! i2 k; d0 `8 R+ b% j9 M7 Smargin: 0px;
" g( ]! ^: @* [/ Bpadding: 0px; . c" O! ` a! Z" D2 q, {/ W8 v
} 1 j8 d3 S& b$ p( [: B6 P5 F
#pic{
/ t0 Y: G a3 i/ q margin:0 auto; 3 y4 W( Y1 H _. p m
width:800px; ! }% R3 i6 x4 y' x" ~# d
padding:0;
( T8 ~4 t2 \! y D border:1px solid #333;
! Y1 d" I1 L0 k* p+ @# [ }
, X9 z- u$ F8 f, n: r" [3 _' b#pic img{
; ? M* q3 l( |2 g3 X; }( L6 r max-width:780px; 6 h" O2 P& e. Y6 q, ^. B K, \0 q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 6 L9 m0 R8 g2 M |8 b4 r- U6 I/ z
border:1px dashed #000;
6 ^- ~6 w$ T* D: c1 j$ z! ]} / ]: I; W/ E+ S. g% x. ?. S
-->
3 e3 c2 x" F- u, e+ a; g6 }</style> 7 k7 ]/ T( e: e! a7 L
</head>
/ j. d; W3 v0 j<body> * F4 ~/ |( R# s- ]4 k% Y
<div id="pic"> . h- {6 {1 z6 I; r/ d A8 R7 b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: L( y" h! G* x. \1 i' Q: D. D3 N</div> 2 w7 P" f) C1 `1 a
</body> 8 d- U' Q- _, E* H. N% `3 |
</html> |
|
发表于 2007-12-8 14:55
| 