|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14191
- 金币
- 2386
- 威望
- 1647
- 贡献
- 1334
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 Y" r$ t$ Y- v+ b& s0 L2 J关键在于：max-width:780px;以及下面那行。# A1 ]2 K( J& f f* l) d
固定像素适应:
8 F. g. I9 w7 N$ i, ^ ~
# W" D& x+ Y& a7 Y$ B- t7 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> 以下是引用片段：
2 }/ Z G+ L4 r- K: | y/ I" o<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( q5 L# g% B+ q7 G4 m$ j1 U, r8 G: n F<html xmlns="http://www.w3.org/1999/xhtml";>
0 W+ x( L) A" E<head>
: d, J0 I6 j; b9 J<meta http-equiv="Content-Type" c />
" W1 C3 a) H& ^6 w- `<title>css2.0 VS ie</title> x" K2 j, t7 l; e
<style type="text/css"> % t# k- Q/ b9 d |) l
<!-- ) M; A- E! L+ I. S& a, Y" u
body { / R+ r+ G2 X7 R. }8 F; g% R6 H
font-size: 12px; % E m% k: [; G* X( D9 m
text-align: center; ( X: T g% `4 H; G3 X! o5 P* L
margin: 0px; * T$ v! }2 ?' J
padding: 0px;
6 }9 y5 a/ ^) M8 W7 K}
) j6 E9 y3 y5 k8 X6 i#pic{ 4 Q# `# B! X Z9 p- Z
margin:0 auto;
8 p" r" y* W! c% s% _5 `% Y width:800px; . Z3 ]9 h5 ^4 f! u" K1 I
padding:0; % e, ?% C w& ]9 _/ Y4 B7 J) R. h
border:1px solid #333;
7 k, b& I: e) x, |6 T2 o }
' u' k$ J M& J0 b8 @; m& K/ H! l- i#pic img{
; l! E% v$ U1 `' f max-width:780px; + T. l3 {6 d+ j* |* A h: A
width:expression(document.body.clientWidth > 780? "780px": "auto" ); # q$ B0 T# p) I, Z8 |! ~% q
border:1px dashed #000; + G8 K8 X" M4 j7 h& {3 w+ X
} & p0 v0 m1 {0 T5 c, ~
--> 6 R) T. u! m$ D4 B" _1 G8 y& g! q5 S* x
</style> 4 P1 q* @/ b8 X" t- b) M. o$ @/ B
</head> 7 `- d1 M) B/ o! R( C2 W) b8 Z6 M
<body> " E! w! `6 a& S$ @
<div id="pic"> $ P8 T% W5 M( Q) S' d- p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> . w4 v$ J2 a6 _# ~. O. X; C; a# T0 Y
</div>
4 e- h/ D# ~# N, m</body> $ Z! U; ?6 |8 k% u( ?
</html>
& Q' t, j2 g V2 }( Z( X% I6 {" }
. ^5 n3 a7 ]/ H/ i7 r百分比适应:
5 O: m7 {5 p& \# p: X# Y7 A以下是引用片段：
& A- P7 F6 f; G7 ?; n2 j( z<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + |( y1 p3 _' S: A- k+ E
<html xmlns="http://www.w3.org/1999/xhtml";> & t0 ^ U3 B' A8 q# g
<head>
; |/ S X6 V# z1 I<meta http-equiv="Content-Type" c />
% P- U0 z% d; |. w! S. P7 T4 q( E<title>css2.0 VS ie</title>
5 P0 W+ C" V' _. w, B# U" _<style type="text/css">
8 ~- _; Z1 {: }3 d. L8 J<!--
; {) U" Z# V0 _9 ?' g) v3 K8 ?: Xbody { 5 w% `) D% l( P G' ]+ M7 k
font-size: 12px;
5 g1 m9 R' A" G6 dtext-align: center; : d w9 ^6 o) A* j3 J
margin: 0px;
& I: ~1 r7 t1 T2 o$ Lpadding: 0px;
' G' h1 G/ f/ V! ^ ]1 {% q$ } ^}
9 q, q# r9 X- q#pic{ / A$ N+ }' r! I8 ]% b1 }! X% x6 r& V5 i
margin:0 auto; * G/ x: @0 @6 a& ?
width:800px;
+ g' ]2 y2 k' E- p padding:0; $ v, ]2 f. q$ |
border:1px solid #333;
2 a# ^- r3 g, `1 M: u }
8 t: B+ e! s2 n6 J; K5 S4 P- J#pic img{
9 U4 e+ o0 w- ~% r. E max-width:780px; 0 i( `& e. d% A) U9 G n1 y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* u6 \" t! l+ O7 R; Dborder:1px dashed #000;
; w9 j9 q* K" D) @4 k} " p Z) v. n* c+ R" X3 b
--> ( o; l& G" ^! P9 b' Q
</style>
6 j2 }- I, c) u7 l% \( W) J5 w! Y4 _</head> 9 v2 ?3 _+ T7 x) H
<body>
0 \9 H9 {+ N' J0 n+ ^9 S: p$ E<div id="pic"> - k% o9 a' d. C& m7 h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( {. B5 B, F7 e4 b
</div>
7 V |* {* x1 f: E</body>
9 [; I! Q( j4 z: ~0 U- v</html> |
|
发表于 2007-12-8 14:55
| 