|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 o( o( T0 f G- q& K- s V关键在于：max-width:780px;以及下面那行。) K' k) D7 A( @8 a% V
固定像素适应:
" Y3 W$ x" Q2 I N8 [" ~2 v4 g1 }% K. S5 r/ `1 [/ k
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> 以下是引用片段：' h4 D% Q# R5 \ A' ~) ^# J4 ~) l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 t r. R3 [1 a8 x) M5 w X) l; Z
<html xmlns="http://www.w3.org/1999/xhtml";> {7 q# ^5 O) b3 k7 c& d
<head>
7 q7 V! d/ w( h# v<meta http-equiv="Content-Type" c /> . u. c1 s" j( w/ p. u1 W' c/ ^
<title>css2.0 VS ie</title>
4 f3 _2 G$ Y7 F<style type="text/css"> : V1 z9 D* O% V! S
<!--
; @/ b' N: V. I# Cbody { . B3 x2 X# }+ z5 g4 }- w6 z1 g: B
font-size: 12px; ' V% i: c! w9 s3 `
text-align: center;
2 V" M/ I4 Q) o. X$ }- b+ Pmargin: 0px;
+ _9 o/ w6 H6 W% B: _* H' upadding: 0px;
2 g, E' v7 g. p* a, O c}
7 @. t9 m% |8 Z& P3 n) z" Y#pic{ * z% Q" @' t: s" L6 g
margin:0 auto; & `. d, o$ ?& u# e1 c O0 v
width:800px;
: Z% U1 J. g. h# K% L! o/ i. R padding:0;
3 [6 ~7 Y& R, ?8 c2 p/ i' q+ H border:1px solid #333;
" R! C# M0 ^$ }! _ } ( _, Q# M! \/ d7 @7 p
#pic img{ 4 ^; j$ X) \3 q8 ]/ T" E7 }
max-width:780px;
. E6 [. x8 B" dwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
! ~- Z- X/ b! n; I: Y4 P3 iborder:1px dashed #000; ! [' J+ p5 s4 y y" d- h
}
# b \) l. U% D; G--> 8 X1 d& a# Z0 U* O+ y
</style> ! P2 l4 B! E7 d/ G1 S! S
</head>
+ }$ {; B* U* `* @. m0 |6 u<body> 6 S" O" L2 d1 L4 k |) L h
<div id="pic"> 4 ?9 p" Q/ A* y) g! s5 n5 K
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 K( W. ?( _8 r# w7 ]8 Z" @) M</div> / g& a3 ^+ r) ^1 ^7 M$ R% ^
</body>
7 U0 v0 f& P1 V2 Y9 _6 ]) Y, ~</html>
* _. s' [2 g" y3 H- |2 l7 ^7 M
; n3 V3 r/ P" v3 z; e9 A百分比适应:' |+ h, V9 J v' d+ `
以下是引用片段：5 D$ z2 t7 I( M9 t* d6 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 e0 n. Z z8 L% l* V4 k: A; S<html xmlns="http://www.w3.org/1999/xhtml";> , h4 y" o6 p' s1 n+ L: B
<head>
+ Q- @2 k& G, J- T0 T8 n: q<meta http-equiv="Content-Type" c />
& J3 C9 ?/ M5 G( K<title>css2.0 VS ie</title>
4 U/ d6 u9 w4 F6 B/ @<style type="text/css"> 2 |* g+ A; ^# s" U
<!--
. D4 l2 y* L& ]body { + W/ V* V8 }- E
font-size: 12px; 4 ~4 |' l2 {, n" e0 R# H' J" U5 J
text-align: center; # P0 u7 W, n0 i/ n
margin: 0px;
5 c% t% V7 G' k& p1 L7 xpadding: 0px; 0 A. E) R3 V: _" K0 Z7 _' e
}
: h' j1 R4 C4 u! A6 M6 S8 L3 b#pic{
k1 Y3 D' e: u( ? margin:0 auto;
$ e J0 v1 [. z/ r width:800px;
% p% o6 ?; a. z padding:0; 2 P# m* Q: \$ ~/ l. h, H+ s
border:1px solid #333; ; O0 R% u9 j8 O" r8 r$ T6 e
}
2 T/ g& v( q9 L( u- n#pic img{
2 N' r& I4 Y1 e; v- o: h3 x" E max-width:780px;
- J" w/ x; T; y- p" y$ ^3 f: E* Cwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# x% f% ?1 e6 o+ T2 @border:1px dashed #000;
) _/ G8 u, x: F; z7 v# F; G6 W} 4 J2 d6 {; G* Y
-->
( G B2 y7 L/ B3 E</style>
' d8 J* b0 q, U' m$ u3 Z</head> 7 o6 o/ _8 _1 n& L w! v' p1 v
<body>
9 X! o$ o. q( H, @4 j<div id="pic">
& @. [8 o. U1 f j0 ]0 t) a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) J4 \: B9 @3 w5 m$ q</div> $ F7 S) q D9 Y5 j o; `- ~
</body> ) h0 a; |3 v5 F+ f" ^& v5 K
</html> |
|
发表于 2007-12-8 14:55
| 