|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14407
- 金币
- 2489
- 威望
- 1647
- 贡献
- 1437
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! F2 a q) ?4 }4 l关键在于：max-width:780px;以及下面那行。
: N: _9 b0 p8 I8 s固定像素适应:2 Z' ~( q7 F/ o* J
( |- x) U" s4 G) K" bdotted; 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/ {# t7 ]" q L* U/ T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 x" l6 ?0 H! P1 j* U1 M' ]
<html xmlns="http://www.w3.org/1999/xhtml";>
, V \5 d4 `' ~ Y0 Z0 W4 M<head> 8 O4 w# K' {" Y! w7 w! o
<meta http-equiv="Content-Type" c />
8 |6 h5 I C8 w- F<title>css2.0 VS ie</title>
2 ~' {' x2 A5 U1 H+ h0 w( b: a<style type="text/css">
9 u* X4 j# W- k. ^4 B<!-- " {1 t1 ]9 N+ T
body {
" n' w# U: u/ M# Nfont-size: 12px;
1 l" r' B Y/ b, F3 s4 Rtext-align: center;
M. n# U) g/ Qmargin: 0px; 9 ^ ^0 V( Y* ?7 |
padding: 0px; c, C3 R$ W) n
} ( x+ W0 h2 C. S8 d: b) K, b r
#pic{
) \3 F/ a( Z' C2 `. } C6 E margin:0 auto;
' _1 J! D) {5 i7 q, `1 j width:800px;
2 v9 L8 I& T4 H" {* F# P padding:0; 4 @3 i4 f' L" S3 S
border:1px solid #333; - T& O9 u, b' ], O
} ; T: N$ y) B9 c, x. y) e
#pic img{
- ~; H' r8 l: `: e max-width:780px; ! [; z" B( o0 j( k
width:expression(document.body.clientWidth > 780? "780px": "auto" ); % ]7 _! |$ N7 R- W5 [
border:1px dashed #000;
% X# J+ t. |- l( u} ; H, ~. u; t' D8 @; k1 h
--> - D y/ O( U, G8 ^" `. y& J
</style>
7 O( a4 g z& P( @</head> ' i) f' y" |5 Q4 v4 h' }( [
<body>
7 ]) g% z' A5 q* r( k. Z<div id="pic">
0 q4 J4 T: ^! c) V8 B0 g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
$ I8 b* A2 ~+ A) s j</div> & }; Q+ Z: I9 M( S4 J' e5 Q
</body>
9 ~- D& Z* R, q! I3 e6 J</html> + K) a. w Z! W0 E
4 n+ `: Q) }0 _5 g百分比适应:9 t4 b" ~* ]$ T. ^+ W8 A4 y
以下是引用片段：# q) W& ^: _# q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 q+ l5 x5 v! N4 [<html xmlns="http://www.w3.org/1999/xhtml";>
! z: v- r+ M, f- `) D9 J<head>
: n9 r& H+ B* F6 e6 G<meta http-equiv="Content-Type" c />
% I3 v3 l6 R, r2 K6 }7 C6 s<title>css2.0 VS ie</title>
8 y# ?+ E% \& v; b% B<style type="text/css">
4 E( Q$ f( B2 U0 w" P$ U<!--
' P; B$ W. m) K! P8 Nbody {
% y7 p% Z6 c: Hfont-size: 12px; 8 v E1 J9 Y7 g" N3 G2 ^1 j
text-align: center;
, o0 i' w4 i0 Cmargin: 0px;
5 }+ ~& d% V, gpadding: 0px;
) G9 \# d3 g# A' s( j}
9 a( t1 ]! [3 D/ J3 ]. u#pic{
! F% p9 ]) H" W" ]8 u) g' x7 p. b margin:0 auto; 9 z Y4 h6 D7 L0 `
width:800px; , l% D8 H+ p. I, S. ]& ~+ |9 p! c
padding:0; 2 B4 V; F0 o% m f8 ~' N, w
border:1px solid #333;
9 C: I" Z0 c' Z) R g }
8 I! K1 G' w2 f$ ^( m# V#pic img{ ; q' I7 `4 I Y t# X/ M
max-width:780px; , J u, N# Z- Q0 a5 Z
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, p6 a: x2 H" G7 V. ?+ uborder:1px dashed #000;
2 S( ]% n/ k. t- C% s( V( l} ( G/ F$ [9 D- K# |" {+ T% h( G, v
-->
) d" u+ H, V4 C) ? R</style> ) b# s7 h" u" G
</head> / ?% y2 B% D$ Z7 h8 C, B
<body>
. K5 G3 A1 g1 C3 Y" K( }# S<div id="pic"> R. O; f/ Z+ g
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; f, w" c8 ^* N. o0 j. T2 }. S' j3 Y
</div>
7 N C3 p2 e0 Q5 d</body> % w9 X' s4 O2 x/ y K# R5 S
</html> |
|
发表于 2007-12-8 14:55
| 