|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14389
- 金币
- 2480
- 威望
- 1647
- 贡献
- 1428
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 P d( a/ l, z/ d' \0 k
关键在于：max-width:780px;以及下面那行。
1 ^2 i; ^$ Q9 c: G3 _固定像素适应:
' E/ K; _1 X/ V1 x/ } S! f) V1 s0 j; A
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> 以下是引用片段：2 e3 O, T6 C# B2 A" J1 [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 z; W9 z$ X7 A) F& Y& A<html xmlns="http://www.w3.org/1999/xhtml";> * W" A1 [0 }2 _* w
<head> ; A! K/ {6 K% g
<meta http-equiv="Content-Type" c />
' t$ I7 z0 B/ n2 i! K* S4 m5 G<title>css2.0 VS ie</title>
# ]2 c/ o; N n4 i% f+ P0 b( _<style type="text/css">
( W' E5 A6 |1 ]) Y<!-- ; I5 e7 H. |' i, i, ~
body {
8 ~2 B5 N9 A# n0 }% y! Wfont-size: 12px; 8 t. a* ]6 B6 j& m5 s
text-align: center; 7 `+ } s4 X( P7 D
margin: 0px;
/ F, g6 s! ]- q9 H9 Fpadding: 0px;
4 t/ y6 @' m$ e} ( @5 M. C% S' }! K7 q
#pic{ 8 l! D, M, q! {2 I7 N7 @+ J
margin:0 auto; / y" n6 b& o6 r! M4 f1 r0 f
width:800px;
! o+ v- p7 [- R6 H9 y padding:0;
# t# W0 z, K5 y; e& b9 I border:1px solid #333;
6 b3 X8 E# e3 S9 ?# F" o" B } , d# o, v. K+ W! m n& _
#pic img{ / w' F* M+ J8 j5 G, M# h
max-width:780px; $ W! |# m$ K" O( T# y9 P
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) f2 L) [$ |0 j. m* x7 b
border:1px dashed #000; 6 @ w- W% L4 q6 i) @
} ! H" l+ M/ _% }$ U, A0 G( Z+ I* p! h
-->
/ t" x% l+ V. d z</style> 7 _7 V# U$ J! T1 H, @ V
</head> & r+ K& d" D7 p
<body>
& |9 Y1 {# f/ C4 K7 \6 n<div id="pic"> # F9 Y, p2 {+ l: x
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 K( q8 V- O( b/ F7 w* H</div> ) x, j3 W1 W, Q! w& Q. z. E
</body>
7 m6 C$ m7 K `/ r' [</html>
( q9 b2 h8 i9 O; f, z( l' M
" ^+ M% b& `+ q& W. b百分比适应:
. P4 C: i8 ~( f7 }4 m; k1 O以下是引用片段：
; d+ y+ X' C& n7 |; Z<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& O4 `$ a! J! }9 ^* ?/ \" V/ U# p<html xmlns="http://www.w3.org/1999/xhtml";>
4 v0 J/ M' m5 A! g' G<head>
/ a2 Y x( F0 q6 j, v4 T% u/ A<meta http-equiv="Content-Type" c /> ( S3 G# C# M' x% X' Z/ F7 ?! V4 l
<title>css2.0 VS ie</title> , Z( @! P/ ~1 c
<style type="text/css">
5 K* T4 B/ o) R<!--
3 {) `7 K4 K$ X1 S3 }- F$ ]body { & x/ j; \( r, {- D/ _; C
font-size: 12px;
8 _2 f; G; i7 M" v/ ]8 ]text-align: center;
! n( ]7 h' [; K9 ~margin: 0px;
q0 n5 d- q6 o/ L' ^& tpadding: 0px;
+ h# C' d4 |8 U( e+ C; b}
, y! J& Q" b @6 R4 p#pic{
T( u w$ _) z. j+ N3 s4 J margin:0 auto;
2 b( }! s0 i0 u; K& M- K width:800px;
3 V* c3 I6 |6 @- f( C8 M padding:0;
2 a8 U' n; U0 K border:1px solid #333;
+ l M. |! U O }
- D. \1 N2 g8 r7 M- H# i/ j4 Z- W#pic img{
) C$ n+ U: c5 v) @ max-width:780px;
$ s$ d- e3 W5 s' A8 j0 |) Awidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ; n8 h; E! t- i! Q6 G
border:1px dashed #000;
( k& X) m1 A% M! K- l" b g: [}
: x7 x m: w7 Y. e) Q-->
* K7 q" j; g) Z. v* y</style>
, r E- K) v- F9 j: c" Z. V</head>
' [ s1 u4 ?1 l/ |) z9 L4 L1 n" Y& s9 w<body> ; h6 A1 e# B7 @; W! J7 m6 m+ {8 t
<div id="pic">
) [8 w6 W7 Q! p$ q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + F+ E5 o' K* @5 W
</div>
2 x6 M* t$ Y; y: Z</body> . A% ` o/ T3 H1 b- ~ I1 p
</html> |
|
发表于 2007-12-8 14:55
| 