Board logo

标题: 在DIV下图片自适应的解决方法 [打印本页]

作者: admin    时间: 2007-12-8 14:55     标题: 在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' P' K6 c1 l5 B! G$ i$ ^5 s# u% S关键在于:max-width:780px;以及下面那行。9 U! {) u* g: n2 r0 U! p
固定像素适应:% U2 `6 K3 C; e: R
# c! }: @$ N, r, z- O- b6 l
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>  以下是引用片段:
! Q2 J  H0 V* J9 r% p' t8 M<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . A; }1 ^- c# s9 H& g* ]
<html xmlns="http://www.w3.org/1999/xhtml";> % r+ r+ i# W! ~" \; ]6 F1 P$ s
<head>
0 I5 w' e9 i' R* p2 \- ^<meta http-equiv="Content-Type" c />
3 m' H, O) u7 m* `! l<title>css2.0 VS ie</title>
. k, H7 H6 s# M+ s) p$ H- b<style type="text/css"> 9 g7 H  d0 Z. x8 V
<!--
) ~9 \- L( H" \7 tbody { 8 N+ g  f  U: d$ Z+ o* w- P3 Y: v
font-size: 12px;
& R7 u" u3 I6 c8 l0 Vtext-align: center;
. N% D4 F2 T6 K% |- }/ Qmargin: 0px;
; @; |. x+ ~. Zpadding: 0px; $ w: ^- ~, {4 S  y  W
} , @% F' C, M4 y8 v8 @% W/ D
#pic{ - F$ Q5 S) M! D; b  y# q
  margin:0 auto;
- O$ \4 ?# }3 [/ G* H  width:800px;
1 H4 b+ r2 i6 t3 }0 Q  padding:0;
7 q1 E" ]8 Q7 _( f( `  border:1px solid #333;
( C- r) I7 V" X: A' F0 Q& p7 n  }
1 k$ `( e8 G9 s; W5 p5 R#pic img{ # h" Y. F- @- n  N  P
    max-width:780px;
2 z: g. D* C1 A, e7 Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 l- G+ }! C3 P6 q$ q& eborder:1px dashed #000;   n, `" O! t3 }+ }/ y. g
} 5 z! t/ \0 @1 C( V9 w
-->
0 h5 i: }0 _8 E4 k. }3 ~3 }: r- y</style> ' w2 c- y* ^: d* \! x# J
</head>
) \5 w/ p' r+ o/ o9 J- g9 n! p<body>
2 w! M5 p3 N8 y<div id="pic">
; l1 [) Z% v) ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 b$ {  C1 X  @# c$ y% f$ x) ~
</div> ; b3 {3 e, ]5 x5 ?* H/ ]' g3 h& m
</body> 9 x3 K# z* y1 u& K$ B
</html>
+ ]# B3 [. S) u, `% Z2 {* P( e. C  y  W3 j8 @
百分比适应:; I% G, j1 Z' e* _2 P& r; m- e! o
以下是引用片段:6 D+ r9 F4 ]% `  j) g
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& L! g1 w% R" A9 l9 [<html xmlns="http://www.w3.org/1999/xhtml";>
& c: U  O1 i) h6 c% A/ E+ f0 _& p<head>
+ b# ?# @: j4 p# Q- [<meta http-equiv="Content-Type" c />
4 v4 ^& D/ F9 o% N9 ~* E& t, R<title>css2.0 VS ie</title>
  g# X. y- ], C<style type="text/css">
5 ]  q: {8 y- j3 ~<!--
2 C7 p8 ]: Z3 W) O2 Y2 gbody {
6 B2 }1 @! a9 L, J1 F/ ufont-size: 12px;
+ p! @; S8 C- g4 {0 K! ~6 ]text-align: center;   d: P) W) i! F4 V* J6 J7 ]# d, W2 F
margin: 0px;
1 R( o+ J, \0 spadding: 0px;
) |% J. \$ e( I9 k; ~& l. L} 4 l& G3 h0 w: t/ p  Q
#pic{
' R2 k/ f/ d8 x' Q9 L' {  margin:0 auto;
+ P  Z4 ~4 s, u( c5 Y) f  width:800px;
# Y: G) `6 d5 `5 H( t! S. A% W0 I. H  padding:0; ! {" o& i' w" f& S' X
  border:1px solid #333; % B0 t7 S! |2 @2 z4 N: N2 b
  } & D6 d/ {7 h" R4 Z6 k) @0 T
#pic img{
0 m3 j0 ?' h, d. i& o) p    max-width:780px; ( W2 S  s, b' z: U4 m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- m  H6 z. t1 Z" k0 J* rborder:1px dashed #000; 2 C$ H' n1 F; Y7 e1 C. z) H
} ! y& z* V+ P* ^) e
--> ! V! ~3 v$ @" J( Z2 O# n) a8 s: D
</style>
: R' e# F* Q' [$ `  ?8 C  X</head> ) v- _  r- d1 S  c0 W
<body>
* k  Z& U" q& a7 W<div id="pic">   \2 Y( x7 i- t9 ?  Y, R; o
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % T0 O% _& R% K5 }& y( Y
</div>   {, }6 q3 R+ f
</body>
8 G3 D' w! }$ M</html>




欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2