Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: S% r8 N! \' r* o( `! Y* ]关键在于:max-width:780px;以及下面那行。# Y! l/ N1 u. z: j7 J4 X
固定像素适应:
+ I0 e# i$ ^4 l( m! J
" E% R7 E( _7 N& D) Q6 ^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>  以下是引用片段:8 W. k: q( x. W/ m1 r$ @. n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 F& l1 g& p$ }/ Q0 q' Q
<html xmlns="http://www.w3.org/1999/xhtml";>
9 x- V2 ~: r$ y  n0 a( b<head> % c* C& ?; K% H; E+ V
<meta http-equiv="Content-Type" c />
: J% O, `2 E# U$ J) a<title>css2.0 VS ie</title> 1 J' [, }4 ]8 \8 y5 d
<style type="text/css">
4 G) D7 F% b: p<!--
: k+ S0 r& m! X; a# l$ jbody {
4 D- {/ e/ F, ufont-size: 12px;
* Y+ C" O, p0 `# ]: p' @text-align: center;
1 F3 ~0 X6 x, v9 T" N9 e! Mmargin: 0px; ' D6 ^' K( q- d7 `
padding: 0px; ) I+ X4 i% }% g/ I. h5 ^: ?
}
- n$ k+ |/ g5 b! I#pic{
; h4 Z! g( r# L9 d  margin:0 auto; " h- `! ~2 ?- ~
  width:800px; * R( ^: h( e# g: p* M) Y/ h: p
  padding:0;
6 c- s5 D" H8 I2 y6 b% Q! f5 o. ?  border:1px solid #333; " p9 G+ @6 c1 \4 \) k4 B* }  J
  } # _) M# ?0 j  t
#pic img{ , l. J, u# V: W. _  h2 z& C
    max-width:780px;
- p9 x  w! G) X% @; l. F1 p: ^3 _width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' b- a& n& H0 A( b, I5 |% |4 J; }
border:1px dashed #000;
2 |; W, N# N% g* b6 s/ f}
$ B1 p; X5 l. A/ Z0 G1 K! h--> % P# i+ U: P7 y: l" A3 m' J$ e' \
</style> 5 M& N1 u! h' K! M  z: h- l  p
</head> * @' y  c9 Y5 U( \+ H0 z6 [0 i# q
<body> + f! X+ n9 r. j# x9 z/ Q% p
<div id="pic">
1 G) O% b, i' x# o* f5 V; d3 P<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 T+ h: Z! P9 b, i9 s: a
</div>
) v3 U0 p+ t2 v- U! V8 J. T8 {3 S</body>
2 n, ?& c. K" D8 P</html> 8 s! w+ X' V$ ]8 J' f

& ^: l6 V- h$ A4 t. v8 K百分比适应:
; G! Y# i2 V: H以下是引用片段:( q( B$ e* A9 r  A* G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. a3 b0 c2 L6 z! e+ N<html xmlns="http://www.w3.org/1999/xhtml";> 7 n$ N# O5 ~; h7 j
<head> / I, G4 P4 O$ T" a* c
<meta http-equiv="Content-Type" c />
( j! J( a6 }, J; x  ?+ ^3 ^<title>css2.0 VS ie</title>
  {+ `. m) G  X<style type="text/css">
( |8 G) g- N1 ]" Y7 D  J<!-- / K& ?2 g; L$ I9 j9 j0 v
body {
! E$ U% K& P2 Zfont-size: 12px;
+ L$ b9 t& b) ~1 e8 E% Vtext-align: center; 1 N) x  W, W; o$ C! r3 f0 J- }
margin: 0px;
, S/ {( s( k8 [+ D6 G3 Opadding: 0px;   r' K) v1 F/ h# \. h) q
} 8 C. r7 R# j& ~. h+ o9 E+ _1 O; o
#pic{ # q4 |: M3 B# Z  r- l
  margin:0 auto;
7 P; C5 a, k4 {$ M$ d3 D  width:800px; 7 a5 x3 m+ `  Z$ l  z. N0 i
  padding:0;
9 n+ ]3 v4 k0 X$ d  border:1px solid #333;
2 i+ x( u7 r7 M' G$ D" a% O4 p  }
. m' Y. w$ q  M#pic img{
+ v3 T( ?6 |6 e' i1 Y    max-width:780px;
( ]6 C, u8 R+ ?width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 5 n* `, G* @$ z, }) f& z" r
border:1px dashed #000;
: u  J& L/ [- q5 r} + P) h- I4 q# P& s2 ]
-->
# h# X/ f$ v  c# _2 F, E</style> 7 c) z! h$ ?; l9 X- m5 O
</head>
% @& R0 K" T% G3 U/ l<body> , @7 B: o5 g8 x- Q9 S: b' S! W4 l, l
<div id="pic"> 2 D3 @& K% [2 O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " x* r" P. w! p. I6 Z% E( [
</div>
* F$ K; ]3 ?1 S- W; I$ z/ k</body> ) s* F2 a  f8 O- t& A7 L
</html>




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