Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ u1 S! w, B: ]1 Z5 y' Y) c5 j关键在于:max-width:780px;以及下面那行。, h, Z( \: Z3 [/ f: y! V$ s5 j
固定像素适应:
, M2 a. p/ R% h  K
* ?- k& \' a, [, @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>  以下是引用片段:# L: ]% u  C! [  }- \* U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* w  r1 y5 T* n0 t% o5 S; l/ f<html xmlns="http://www.w3.org/1999/xhtml";>
$ p# H7 w3 S, L& u: Z6 F<head> 4 Z% k/ q' D4 |, N! m$ e
<meta http-equiv="Content-Type" c />
: [2 I0 {" V& Z" G<title>css2.0 VS ie</title> 8 l3 Q) p& h1 d  s% u
<style type="text/css">
! G) i9 ]2 S8 R% S<!-- 4 r! i8 b) a5 a& J1 P' |: ]5 o# E
body { , s+ e% a& H, y; q& |- J( O
font-size: 12px; ( q' s4 T1 G+ r
text-align: center;
/ R" e9 h! |# q' [$ Dmargin: 0px; ! d/ l8 y8 ^) [1 N1 {  N# @
padding: 0px; 8 l: d6 g5 Y! V7 d* J9 ^
}
( \2 C. I% x5 J: V3 l, n: r/ D#pic{ ' L- r% |" }& y7 v# o
  margin:0 auto;
: x* M: p0 ]$ Z) A  width:800px; . _- }- m) L8 p
  padding:0;
+ s8 J$ q5 D+ A3 Y  border:1px solid #333;
) c4 K* A" K' m* r, e" C: d  } 5 z  k6 I) u  k' Q6 L7 o. t
#pic img{ 9 @' E) |3 E. z- |4 {$ U* C$ I  e1 N
    max-width:780px; ; W8 N" P4 I0 V
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! ?: [8 {% ]+ c& `/ g+ Jborder:1px dashed #000;
  ]5 H2 T. ]% }0 [, [+ ~} ' d# a- `) m0 ?+ P0 X/ Z1 Q! l+ S$ x
-->
' f9 Y. k5 K  M3 }  S</style>
" j$ ~; O* n* K+ f</head>
4 H0 J* I8 b9 b3 v/ K0 M+ x+ P<body>
) c- [' H" Y9 J  v9 G8 z2 I5 N<div id="pic">
, X! M$ O# R/ q. t$ @  t8 x<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' B: [$ R" H9 Q( B$ H</div>
8 d* w5 ^. d3 R( Z& n  }</body>
" U, z* M  A4 D$ J( _$ Z! r</html>   B* w  O& y1 Y! C& `# Y* X0 z
) Z0 B5 l( i5 ~
百分比适应:1 y! b# O2 a/ k. _1 O* s
以下是引用片段:- ~. J4 U$ B! v: R9 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 l# B; Q" N7 O. w<html xmlns="http://www.w3.org/1999/xhtml";>
! v3 a' C, u& O3 Q# R" J+ V<head>
8 ]' i- z2 d6 P7 y- X3 o$ [* C<meta http-equiv="Content-Type" c />
" O5 K* o" `  y7 }<title>css2.0 VS ie</title>
* p1 U! z4 C* R% A' M% D  s* ~" K+ z<style type="text/css"> % {% `- @6 I2 w8 \( z; R
<!--
9 s4 @1 }$ F6 y2 m& f% ubody { 1 _) c- o, Y4 [9 X% M9 m) C# g% C
font-size: 12px;
8 v8 L" u- P( f' x- D8 J' Qtext-align: center;
7 \0 U$ a; N; L7 H, N2 T" h6 Imargin: 0px;
9 i  A1 a# ]+ z2 ^8 \padding: 0px;
- ?& `, i! }% L5 K9 n}
/ m# j: \/ R6 j6 l9 G#pic{ ( E# x' y# B3 Z9 C! t$ {
  margin:0 auto;
; W3 ]6 q5 i3 p1 s% q) g* b  width:800px; $ r5 d! W+ |2 H
  padding:0;
( m7 W  J+ z+ Y2 h* p. g  border:1px solid #333; % g: @- e9 J, J& M
  }
6 Q1 c8 _$ c6 M' M) s1 ~& }2 B5 E/ i#pic img{ * |: T2 a  x0 v2 L% w2 m: K3 q
    max-width:780px; 5 s5 R* o- e' I, l" ]3 ^4 p
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 }0 a+ h: ^1 }% Q
border:1px dashed #000; # p# M! R7 V2 H, M
}
8 [. m' f  U/ n& J; i--> ! n% e7 J: }) J* p" V: V
</style> ( z) l% {, ^4 {2 ?) _
</head>
5 o$ A) I2 X6 q8 u9 _<body> - {/ Y, T4 i5 [+ Z, c7 X5 {: I9 C
<div id="pic"> + P! ?$ F& U5 h6 l/ I! H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) {) J: F" e1 X5 ]" t' i</div> . T7 k# K1 g9 e3 O
</body> ' B5 N7 u# _' D0 V/ Q- v8 C
</html>




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