Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。8 h* ?4 u8 Q9 D
关键在于:max-width:780px;以及下面那行。
. V3 {" c2 d- O" u/ `固定像素适应:
9 @' h) \% [. b9 [: B/ C  b4 Y
6 Y6 \2 D2 z8 [# T/ E+ z0 x! ]5 Pdotted; 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>  以下是引用片段:& g6 p" o& o! x) W% S  T! k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - b2 Q- I* J' O1 z: e
<html xmlns="http://www.w3.org/1999/xhtml";> " N8 z6 s5 B+ O. O& v+ J
<head> 1 z( e9 ^" V' H" f. y& V
<meta http-equiv="Content-Type" c /> * c* r8 I* }$ F! ~# ~' w. @3 [1 `
<title>css2.0 VS ie</title>
8 K% X" r: E4 d$ n* k0 l<style type="text/css">
) N4 i; Z) Z% O0 s9 l  ~( b<!-- 8 J/ F% Q/ g: K/ }" @& @
body {
2 f- k& ]* l# L! R9 |* b" [6 gfont-size: 12px; ' ~$ }2 |, t* K( \0 V
text-align: center;
. H  N/ o0 n0 F; P: l8 ?margin: 0px; 6 Z/ X; ]8 W6 d+ _9 s
padding: 0px; 1 ^8 y' ^7 Y4 x) l6 h
} # r( W# M7 {: r1 `% q
#pic{
( X9 d# O+ }* s4 P8 T1 Q  margin:0 auto;
; \4 B+ {: l3 z/ a  width:800px; # w4 r. Y2 F# w& F5 ?3 U
  padding:0; 4 E0 ~. @0 s* a' f1 x
  border:1px solid #333; * g. z, a: y, s
  }
: G* i* l9 W2 R( j4 f1 @#pic img{
, G4 d5 S7 N1 Q# [- x* j    max-width:780px; ! h( m2 x8 T+ H! M  b) ]
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 v' K% F5 J( Y
border:1px dashed #000; 9 M2 N8 {! `/ t' a8 ^5 E
} ; Z& ?6 p- u3 _, K  A% r
-->
& R1 u$ X, _$ a3 R6 B6 Z2 F</style> ' H' \1 B. F- V/ g' p
</head> ! a. p- q1 p0 R# Y0 ^* F. ^
<body> 7 ~' W6 c+ G, t2 p6 q
<div id="pic">
$ @+ n5 r  ]2 B% i9 Q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. U/ ~' v& x8 t4 s</div> 4 [% y9 B6 A3 i3 @* N! f2 L
</body> " P$ R  E; C* y/ j. y7 T
</html>
! q9 Y: D+ N7 J' o  o$ A! ^! _1 X( M
百分比适应:. I. u8 R, Q) q. S% a/ y/ r
以下是引用片段:, k: [( d1 Z. Y. f! V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
  k4 p' g& f) w& N7 }<html xmlns="http://www.w3.org/1999/xhtml";>
1 b; g9 h8 @8 L6 j, h<head>
: H; s6 y( z! F; S6 s( R<meta http-equiv="Content-Type" c />
) A9 J) c0 N8 C9 b<title>css2.0 VS ie</title> ( A; \; Z0 L' c. T$ C
<style type="text/css"> ! ^2 k# Q* U+ S/ E2 F! I4 y
<!--
0 i& h' p$ s" u& Hbody {
4 @5 k% b( E+ F4 a- Q8 }' ufont-size: 12px;
6 a1 N/ ]8 U/ d( I" ?0 mtext-align: center;
; h* }& S' E8 X5 Z- xmargin: 0px; # R9 g+ W, A$ i( P! J
padding: 0px; 8 O2 p- B) z( ~
}
% H6 }( G' u$ H8 W: P#pic{ ) r6 ]/ F0 O4 M
  margin:0 auto; # y. v! v  g9 s5 v. [( [$ Y
  width:800px;
' Z% d  C: e2 s  padding:0;
/ i+ d- X% g2 X. Z6 k8 O: l, `3 @" G$ k  border:1px solid #333;
" @) K0 `$ P1 Y# v" T  } 4 Y+ I9 X: ~( _
#pic img{
5 Z4 {0 r: x' Y5 S" D    max-width:780px; ; u  N1 F( T! `, C$ a% G+ m' H, K
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 9 L% t1 d: i7 z1 R; o1 u
border:1px dashed #000; % t1 v* j5 `. U5 Y* Y/ w4 I4 D/ U
} 2 d0 b. w$ q, q- R0 R
--> 0 }0 K3 F% B# q+ @
</style>
) i. ]8 a/ y/ Y% }& s; x3 f% f</head> " G2 V3 R, ^# d! A: R4 G/ u& `$ ~
<body>
* a7 V: n( m: O; I2 Y<div id="pic">
+ \9 B. ?1 {+ x4 ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 o% X5 G7 \+ L( z; ^</div>
' s. X. }- l8 `. c% y</body> & }' h+ v! @1 E0 e
</html>




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