Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* o! J# V/ g2 h/ @4 h# Z+ Y关键在于:max-width:780px;以及下面那行。
1 ?  \6 h6 {' g1 c0 h* C固定像素适应:
/ W9 o4 W  W7 ^2 N1 a
) ]' z/ n8 X# n2 Sdotted; 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>  以下是引用片段:
! C5 A" M$ y0 ]6 H0 n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) M/ c; l+ E4 H  S- k" M<html xmlns="http://www.w3.org/1999/xhtml";> 8 u. U7 p: E5 [' M. s4 S% V: F+ s/ k
<head>
( C# d! P& R  u1 d  `6 O<meta http-equiv="Content-Type" c /> 9 i5 s* ]& F: q: A+ g
<title>css2.0 VS ie</title> 3 k2 k5 G1 R1 ]' ^" P! q# w
<style type="text/css"> ; N  r# V9 _/ [( ~1 C# S* s1 b
<!--
7 l! o* O6 q' V- Ebody {   \" U) d0 n2 c1 [
font-size: 12px;
9 ]" ^) a* c4 ^' C- l+ ^7 utext-align: center;
, E6 x  }( T2 {6 C4 v, wmargin: 0px; - }! j; e/ n/ P! D
padding: 0px; % S+ m+ z% Z) U* G2 w! G  \, N
}
# M2 X& P5 r! ~#pic{ " c' c& ^; Z) Q
  margin:0 auto; 8 r$ a( Y+ a( g/ h! ~2 C
  width:800px; & y" r: Q0 j5 ]: o, @) a
  padding:0; 8 K* k( M0 L/ X2 l
  border:1px solid #333;
$ C$ }; b6 i: W  }
) y+ v$ |; _2 U2 Y8 n" V#pic img{
1 I+ v' z. G  t% L: F$ `    max-width:780px;
& x% n2 j+ W1 ]5 S) Fwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ( R9 n) W: A+ ?$ C: [# C
border:1px dashed #000; + F  Q, I$ c( \+ `. `8 Z  e/ T& }
} : d; @0 G, J0 \* |. ~# f% ?7 n
--> 2 q2 L. p. t  N$ y+ E; t6 o2 P9 ^+ Y, S
</style> 8 C1 `9 H$ t+ X
</head> 4 ^! p9 f) B, U$ {2 B
<body>
6 h1 T2 C- W  f0 ?9 g<div id="pic">
" }0 j: u& H- L<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
+ Z1 t' |2 ]; h" T</div>
7 L& i: ^) L& K% I3 A</body> * T2 d. V" O& f% V' X/ K- s$ U4 L
</html>
/ e) {) f; j, h. S; y
! _! P- ~- R0 f1 Q, q1 E百分比适应:1 H( i: w' M  D  r; C  _
以下是引用片段:3 G( t: [& @! v* ]+ f2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>   _- V' v0 ~3 g5 J% H
<html xmlns="http://www.w3.org/1999/xhtml";> + R6 U9 E4 v* B7 a
<head>
3 R3 M2 u4 O  t, Y<meta http-equiv="Content-Type" c /> " @( U5 T- z% _6 ^
<title>css2.0 VS ie</title>
9 E6 Z, Q6 n: V5 b9 j<style type="text/css">
  V$ y/ p+ C$ H+ b! c<!-- . V" g: o# Y" p
body { 4 J1 r- E# p" s* Y- F1 w
font-size: 12px; ; }2 T1 m/ ^% U/ L! P
text-align: center; , E2 b  D; l; [/ m0 ?: Y" u# p& }' V
margin: 0px;
5 h. F( i* e* q5 O3 g& ]padding: 0px; . Y9 {& a! Q$ c
} 3 _$ ~2 ]0 g2 ^" N
#pic{ 1 z# b9 @. Z+ R, o! t& Z$ {
  margin:0 auto; 8 s4 S( O( c/ z
  width:800px;
# `7 o+ @0 q. i6 O- _( |7 x  padding:0; 8 Q8 g$ Z7 \  p* p6 ~* o+ y, Y1 H! s4 L
  border:1px solid #333;
( B) K7 p; O+ T; [* i  } ! M( {$ \6 J; ?
#pic img{
& _$ s. O1 V) m$ s8 z. K. A+ o    max-width:780px;
5 ?% p$ N" R) O- [% ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 t+ |9 T+ x6 Z- h6 P' |border:1px dashed #000;
& Q% [+ d7 z3 _4 J- Y; N}
- V2 p" t0 K5 _5 n, S6 J' m. \--> 8 A- I* O- S1 t  P
</style>
, u7 _$ G1 y4 I- Z6 u</head>
( J' X2 }5 M+ B5 ]$ M<body>
& n# }5 O4 x/ a/ z5 f+ l3 o( L<div id="pic">
( j) U! S9 U! z- d9 f/ {" t<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>   K5 \) D5 j& w$ ?! {
</div> & w/ B- o$ t+ j8 m- A1 k
</body>
1 \5 u+ W+ O& |/ a</html>




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