|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。3 r/ ]' z6 [7 k2 U. H1 i! ?/ K
关键在于：max-width:780px;以及下面那行。
( n9 {; Z5 t$ Z& V固定像素适应:
; A( j5 c* N' u/ P+ c. B! @+ I
, e* Y7 z! p% L, Y6 ? g% Y+ jdotted; 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> 以下是引用片段：
( c: I0 o- ^0 w6 {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! }1 [; O) q( A2 n( x; p1 h5 y
<html xmlns="http://www.w3.org/1999/xhtml";> ! w' c4 r) U2 t t6 x+ B! N5 K1 ]
<head>
3 E/ f: u: n& `' D1 C8 [<meta http-equiv="Content-Type" c /> & f$ u) p5 v( _ q( n8 b! g5 _- C8 [
<title>css2.0 VS ie</title>
" W7 B0 ?4 @& k: M* f/ }& \<style type="text/css"> 1 ?+ k' F5 _% f7 p9 W N
<!--
( o5 Q, E7 K1 x6 xbody { & H' ?+ d' w) u$ p6 [
font-size: 12px; . M8 e) S8 v& D0 W8 B4 D& y8 {
text-align: center;
* X" m; M- y" w- ]0 G5 Q. a7 imargin: 0px;
8 g0 W+ ?* v, z4 M* c0 i% Dpadding: 0px;
6 ` N0 W" ]/ T} ) a9 [# F( {" D
#pic{
y2 x+ L3 D) Z2 ~5 C- j margin:0 auto;
n/ i/ p2 A4 \ width:800px;
; |5 z5 i6 e9 Q- m D; N1 a padding:0; : b H; i4 o! K$ F4 K
border:1px solid #333;
f6 E% d s- O } $ B4 I3 Y0 X5 l/ L
#pic img{
% U% g# u9 R! V1 k$ h max-width:780px; % F, p. N0 g8 K" W; [8 y" p: E
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 C' H+ E* ?4 n% \6 n: Jborder:1px dashed #000;
; ~9 k; Q( [5 H6 s' e: q% L/ Z5 ]6 f} j/ ~' [6 }7 e3 ?1 k9 ]5 w
-->
4 s/ L# O; d2 P9 Y6 y</style> 2 S( o/ x& H* f! L8 F7 [
</head>
% ^+ G8 K5 h2 H0 V9 Q<body> 4 f0 q6 _, j! L! S! u9 z
<div id="pic">
+ [7 k' ?; A! W1 C# Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, `+ `$ n) t7 }/ F8 _; T% T7 `</div> + a( A% p6 }( c) U' j! c
</body>
2 z) F. x0 |6 L</html> $ H1 |5 l6 Y1 t- R) T; ^
3 V2 k- |# k9 N6 M/ x" I4 B百分比适应:3 Z5 Z3 o! f9 s; E: [& T# k
以下是引用片段：& x# j8 T0 \+ b( }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 x0 X: j5 ^8 ^" l9 v1 t/ H3 B9 m<html xmlns="http://www.w3.org/1999/xhtml";> 0 l" }" q: h( \
<head> 7 O. x$ Z) a: N* b, W- B
<meta http-equiv="Content-Type" c /> # ^2 M/ K7 M. O4 @& u( U: q% u
<title>css2.0 VS ie</title>
9 t. s) p" h" k& o<style type="text/css"> / F# ?$ R3 a* _3 i: }" W
<!-- ' O& i# F/ w# i* P1 T
body { 2 ~9 ]. X( }+ r8 U* \- K
font-size: 12px;
5 Z. P& C/ b1 s( Qtext-align: center; 8 M+ ^; z% ~4 B& f; H1 \( K2 R, e9 C0 V
margin: 0px;
) L' S' E& `# Ppadding: 0px;
; i+ {. G, {( o% Z4 K/ P}
2 Z$ d7 u' y6 D$ r$ W#pic{
9 a5 ?( i% w' b! d4 ]) ] margin:0 auto; & Q# u- v, i$ ^2 H
width:800px;
1 ^$ D3 @4 K) q! d padding:0;
0 H7 G( g/ A1 N9 j- d border:1px solid #333; * } T2 r- v: {8 v. r$ p1 E0 N
}
7 T* E! {8 b7 \* K: U& b1 n, J7 D#pic img{
" ]9 Y! H: j. \4 p max-width:780px; % v/ S i/ U- H. K+ n( Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # P( G7 b! C' F% ]& {4 C, [. e% c9 a9 h
border:1px dashed #000;
1 S& G9 h3 e- s9 h- o6 O} ! Z! s9 ^8 y: H
--> 4 z1 h, d; s4 c3 p) G7 k
</style>
. K% K3 J8 a, d) k! e* C! J</head> # e I" T, {& C/ F; X
<body> & b. O- D& \* i* j" M
<div id="pic"> % g2 m5 i: c. R( Y; O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! w9 ?( \& x% l; y2 ~5 v% s</div> . A: Q( X) H+ U4 L* w2 e' ?/ |9 Y
</body> r1 n( a. x7 K& h+ b6 X- K
</html> |
|
发表于 2007-12-8 14:55
| 