Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 @1 ^0 |8 n! k5 T( V关键在于:max-width:780px;以及下面那行。
/ g1 a: M. H1 y4 H固定像素适应:& m' [! i, _! Q% ]; A/ `

# }5 }* c! u+ ?, |& ]* H/ Edotted; 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>  以下是引用片段:
, ~1 d9 A3 A7 {3 W1 C<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , A: U2 q8 t0 j
<html xmlns="http://www.w3.org/1999/xhtml";> 9 B' A+ [0 H# [. m
<head> 7 t( I6 M- _& h
<meta http-equiv="Content-Type" c />
7 z2 U6 V# U. T<title>css2.0 VS ie</title> # L& k) b- b7 m) \: z
<style type="text/css"> : P' K/ z) J' I- g) t
<!-- ' S9 B1 j- N3 G6 [
body {
% j& o* m9 w" F& wfont-size: 12px;
* H. U, c! G0 n( A" Y% jtext-align: center; ( Q9 @6 {% q5 g7 N5 z2 K
margin: 0px;
2 H- ~% W, F7 g1 v! V% t# U: lpadding: 0px; 3 A7 V8 x5 z* F- N8 O) y
} " U+ Q1 D! P( `
#pic{
. r1 I2 y" x, A- M" U+ {1 H1 y. O  margin:0 auto; % S6 f2 N. W  l0 ~1 n7 e
  width:800px;
3 H5 z7 b6 v. a! L$ ~9 O' G5 [# Y  padding:0; * r! l# w( j. S7 T- l
  border:1px solid #333; + X# U2 K6 ?' ]1 s
  } : _3 o+ L9 J5 B3 A( ?+ c& z
#pic img{ 4 _& [9 J. I$ h3 y, F
    max-width:780px; : ^3 E3 Y4 p- _
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' n2 f% s4 y# }& ~
border:1px dashed #000; , l% b2 }0 z8 P
}
- i! N( n2 u: X; e4 Q# E-->
* F+ H) `; q; N9 e& F% g, M" s$ L8 d/ y</style>
/ ~, `; `! K9 o! X3 M) Y</head> 4 T6 H4 S" y3 R+ k4 I
<body> + k! A! u, k  |4 R. c
<div id="pic"> 6 a9 E) C0 @& a
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 d. Y2 g  T3 i: r( O  L</div>
. N* h$ ], c' H* |6 v- m% h. p</body> . y6 n6 t3 F& _3 |- T- y) Z
</html>
% X. L4 s' Y6 @7 m1 f% E9 X, H+ `9 K( n% b
百分比适应:: a& d) w. m2 ?9 t7 M. u: B  t
以下是引用片段:; \1 j7 v; _0 \: S6 P! A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! y) f* `" W; x1 P, e. z<html xmlns="http://www.w3.org/1999/xhtml";> 6 c/ ^6 d! x8 ]7 N! v
<head>
1 r9 w4 q3 {0 S; s0 B! x. }2 o<meta http-equiv="Content-Type" c />
9 N; L% B1 @/ \6 c; R) C! ^<title>css2.0 VS ie</title> ; F9 A; R0 |" q* ?8 M. U5 a
<style type="text/css"> & x* p3 b! y8 B$ x* l
<!-- ; {6 a4 X  Z3 v, I# q
body {
, D5 c: R: j  [" _. ]3 Rfont-size: 12px; 5 N) T8 T% W: _* t
text-align: center; ' s6 R" x8 b) Q  {0 e3 b
margin: 0px;
' x: ~& M$ W! F2 s4 Q( Hpadding: 0px;
) [$ b$ V- j( |. ?( H, {8 n}
& {: e, k8 V3 e4 u1 e1 S$ A#pic{ ! a- v7 A5 @$ J: V( c2 @
  margin:0 auto;
9 s" c" p. `5 X0 Y  width:800px;
3 S6 ]; t: a' p2 y  padding:0; 2 [  |; F! D) H
  border:1px solid #333;
7 T0 M# F- m% c5 M: O  }
1 |# L2 J+ E* F9 @  |* Y  d6 \#pic img{
7 y/ t6 f: l# N1 u1 O  c    max-width:780px; , b% X* G, R9 z' y/ O. f6 b' L
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 e+ @6 N; K% Z% p9 Wborder:1px dashed #000; % i7 j3 `2 F% ]. l5 e; o
}
1 Q& x" W8 Z" |' F. i--> ' V9 r, V6 ?& {# j: o. f) [2 g4 A; x
</style> 9 U- A; h$ j% s  d. W+ L
</head>
: P6 R$ X% ?4 D! X( h7 q<body>
7 O" c; E" J* O  N* ~<div id="pic"> : y& o5 ^! A& X( X. g! D- u
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( y% o# V+ j) m4 h5 s: C/ ]8 Z
</div> + s& n! J, \& h( }  H
</body>
$ I$ f5 X; n) v</html>




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