|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14247
- 金币
- 2414
- 威望
- 1647
- 贡献
- 1362
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 V$ \/ _7 _8 f) M1 x6 m! T关键在于：max-width:780px;以及下面那行。. P6 R3 x7 C! z1 _& X+ C
固定像素适应:! \* B' t, d4 f4 j; {
1 V" m9 ~0 C- h
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> 以下是引用片段：5 C* M3 `) V2 Y5 m( N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, C e3 I+ \$ L1 \0 [- {<html xmlns="http://www.w3.org/1999/xhtml";> + o/ }1 K& s: K" Z6 r6 V
<head>
) F: x; x6 `" z1 o8 M ^/ M0 [<meta http-equiv="Content-Type" c /> # X a, r, K4 i2 ?+ l7 z
<title>css2.0 VS ie</title> ) {. f3 }2 b) \' H7 \( [
<style type="text/css"> % V' v3 I2 ^8 F9 B& E3 M) a
<!--
8 e) z8 R9 p8 v! @3 b2 t0 M2 A2 lbody {
: {$ N3 d d$ [7 v7 I1 vfont-size: 12px; ; e7 z( X4 ^! M" Q3 n
text-align: center; 2 v+ q. _8 U [7 U
margin: 0px; W1 B y0 b, g4 C# k3 C, |
padding: 0px;
; I/ V4 Z, E: Y- Y- U" k( \; S" o} ; I4 z }0 \# Z
#pic{
5 k- k# w/ n7 m; N# p& P+ v: b margin:0 auto;
+ i, b% @& K$ Z- W8 h; l- r width:800px; & Q, F0 g: i# f
padding:0; 1 G2 b# D" I! X: f L* J
border:1px solid #333; ; d5 Y. T; \& W2 [+ V7 f7 N$ n+ |
}
( k# d" g; Z& q8 {! Z: _4 p4 S#pic img{
7 b8 x# u1 q0 X n. [- S4 v. _' f max-width:780px;
% E( B# v# d7 [5 X1 s1 E/ bwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ; ^ @8 v8 ^- E# Z7 z
border:1px dashed #000; & @9 {/ U7 r" r( t( O* N
}
+ K9 N( s- J' w$ g% n, k-->
6 o* Y7 D9 ]/ B) N2 d6 q* F+ e! e</style> % k0 U# E% d! N- \# h
</head> 9 ?4 b0 F. N" O
<body>
) l! h* N# ?6 J/ I- O1 K/ m( z9 K<div id="pic"> 0 g+ p% a3 `3 u g! \4 w% P4 H# b: k
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; i3 e0 K! M: ^. f; v: G! B# E
</div>
8 w' I6 ?6 X9 {, z6 V</body>
7 f" U0 ?$ w6 N6 H# m: B1 S</html> , w5 j1 A! O7 U& p
4 b3 j5 Y- `6 l- ?& c
百分比适应:
$ x/ d& l B- B$ p6 l- m以下是引用片段：
! Y7 T1 V. V N" `% r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 m- Q6 L, I4 f* `! U<html xmlns="http://www.w3.org/1999/xhtml";> % b6 E6 \( T: u
<head>
" j. Z8 q1 v$ j H: i( R5 E4 V4 `; {<meta http-equiv="Content-Type" c /> 4 K! `3 H- S. J, L& x- P2 M
<title>css2.0 VS ie</title> ; Z8 @( ?+ G( ~; ]2 j
<style type="text/css"> ' v1 M, o9 q7 ~
<!-- 8 Z( ]# k/ V% w" w+ L$ h, U
body {
/ q5 E" l" Y; ` V: r% f" zfont-size: 12px;
0 {+ V1 m* c; n( atext-align: center; * }0 j, f5 y" [5 b
margin: 0px;
! z6 C( x1 z1 o% Q# S: Rpadding: 0px; # D% `1 Q4 n0 ?( l; S( T! V6 T
} ! U4 U/ T5 L: g% u1 `
#pic{
% A. h7 c3 n( [" b0 @ margin:0 auto;
; \9 w- K7 t1 s! B! H width:800px; * T+ m9 W5 `: K. L( F
padding:0; / s: W- n+ E6 g/ s" f5 D8 k
border:1px solid #333;
) `4 E' q6 |$ k- B( } }
" _3 u' W* I1 e& W8 X& ~0 u4 R#pic img{ / F9 r6 A: r" _
max-width:780px;
: w4 M0 r3 x7 b: [% ~5 L/ vwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 4 \$ _: g, Z1 P! P3 h9 W
border:1px dashed #000;
5 A2 r1 j6 p0 T6 L* M}
8 q' B( I. I/ X3 b3 |: c--> 0 f2 A' W) `! B# }8 J% e9 W
</style> ! m4 U$ H3 s& u* S: c: E
</head> + I! [5 k. P5 I( w" s
<body>
0 V- N7 T8 F" @) l<div id="pic">
1 M' E6 y7 M/ y* e, `! r, x. U<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * g2 J, P: {8 r. _ \9 _+ S6 m
</div>
& c& E f9 d h5 X" M</body>
" d6 {) L% n& O' A& w</html> |
|
发表于 2007-12-8 14:55
| 