Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。+ _* Q4 @* M8 I7 n" [) @
关键在于:max-width:780px;以及下面那行。
9 l/ ~7 X/ N1 W( G; I6 p5 E固定像素适应:. P9 t% t) ?) P3 h7 l# o3 I! S
/ B) I! \% T0 H2 a3 r7 w
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 f6 K) n+ F1 y) U* m' Y4 }. K2 a4 T! _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 [5 I6 [, U$ w% W" ~+ j<html xmlns="http://www.w3.org/1999/xhtml";>
5 Y+ j& N1 Z& @- w2 }. P) s; P<head>
* |  s2 e0 }8 k( {" q; z  P/ u# f<meta http-equiv="Content-Type" c />
2 d& K$ ~$ v8 k, `! E( M/ c/ P<title>css2.0 VS ie</title>
7 f- s* y. Q# k4 w4 O2 N3 ]# A<style type="text/css"> / {+ e1 o' j$ v* M
<!-- / Z' @$ T, X/ @% K
body { " H9 B4 q( l8 C4 L  i
font-size: 12px;
2 E) g# r" x! B9 Ttext-align: center;
# n- k* Y5 B8 c0 Y3 smargin: 0px; . R& I) k/ s% d- R) c; U
padding: 0px; " p& ~- z9 N' K3 N2 i7 G- |5 V
}
$ s: Q$ O; h2 k: s& f+ A#pic{
) E+ x. i1 K/ Q1 }( z  u/ U  margin:0 auto;
/ G& f. s  d5 \, s! V  width:800px; 6 G* |0 k- [; A1 n$ N1 V
  padding:0;
) U4 w0 M+ j& f* d. X  border:1px solid #333; 9 h( J# q8 C# n7 ]& \1 t
  } ; j+ U! U! X. L' X+ I1 Y; f4 d
#pic img{
7 H0 G1 h1 I2 f4 M# |    max-width:780px;
7 n8 S2 V! f. [2 }( Mwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
2 m) P" W5 O' ?border:1px dashed #000; ' t$ _3 x/ S  t3 A( Z0 I0 N
} . ^7 M# s4 e2 j
-->
5 b2 J& p# O7 X7 u, b& `</style>
, F3 v9 K! i5 l3 a</head>
" G- T- u) S7 ~2 N! G<body> 6 _. e7 ~1 ~. B' m
<div id="pic"> ; x6 E- c+ K+ R3 u$ V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( P- r* k8 g* U( _) E9 a
</div>
- g- F- N* k, G7 D</body> : K! r9 V& T* l' E  h' ]8 ]
</html> ) D: u% `$ j7 i3 p8 j7 v4 N
* d# O/ {+ q4 r+ }" D" K7 ]
百分比适应:& h) T" J: ]/ c( G! m# s
以下是引用片段:) C% }0 w- j7 r' |- V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& X9 a9 X: U5 v* Q7 B3 @' [+ h/ f<html xmlns="http://www.w3.org/1999/xhtml";> % i7 u3 t9 e+ k: A" `; d! L" ~
<head>
; p* G4 W; \7 x4 w: v5 q8 g" \<meta http-equiv="Content-Type" c />
0 M) g" u- G. X2 o<title>css2.0 VS ie</title>
) Z6 S. o) }+ d0 S. k- Q. \' i. F<style type="text/css">
1 R6 o+ a/ f' P<!-- ( j, ]; M% c$ \* K6 r# B+ s
body {
+ }! F8 a& `! J, M. j+ ]font-size: 12px;
& j. D8 ~; D: V5 itext-align: center;
4 y& Q7 \; H! g( \. v! @4 Smargin: 0px; + Z/ [5 z0 t4 U+ R7 n* `# ^
padding: 0px;   R0 k6 y! |+ s/ R, q2 X, Y
} 9 q; V4 @: F4 `+ ~
#pic{ ) G4 ~0 N9 H/ F7 I
  margin:0 auto; - M% _- E9 |2 q, N- j; U0 l8 E
  width:800px; ! `7 N: g6 O8 w6 l
  padding:0; / K0 Z3 v' B0 x' j" D+ T( u0 E
  border:1px solid #333; ' ?3 b0 f$ |& J. H2 x5 A! p8 e( l
  } % K+ P# X0 p8 ?) P& O
#pic img{
4 E" G. h7 @, l# U, Y1 O    max-width:780px; ; T9 q8 v3 w7 \8 Z0 M- u- n/ G
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ) w2 a/ y! I  ~8 N' H, b7 S
border:1px dashed #000; - b& g7 P8 @) m
}
% \2 G- k5 l2 ^! i" t$ L--> ! _6 r8 [, e2 g* C
</style> . k; D: I( |' c3 h) q
</head>
& @" p1 \- s' Y. B" d<body>
/ L0 n- l) Y: V' q7 B<div id="pic"> $ V( O5 D0 G3 j" K; \/ N
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & _) D! z6 `) |3 [% Y% _
</div> . h8 L: H$ }2 q
</body> ( E! [. A2 M) S( T9 d0 d
</html>




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