Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 R+ \) B9 `( J. _1 j4 X关键在于:max-width:780px;以及下面那行。
" }. @$ V# _% p- m. y固定像素适应:
. a+ l: }5 V3 \% ?2 `# v9 T4 R0 O
0 v7 O7 q. w- r; U8 B0 C3 O3 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>  以下是引用片段:) m' m, V9 s$ ]4 X8 A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& @* L/ K, b+ e+ r0 i<html xmlns="http://www.w3.org/1999/xhtml";>
; h7 }7 ~$ L( Y8 L<head>
6 g2 z. r, |% o, O<meta http-equiv="Content-Type" c />
; m# F& S: [" a: V<title>css2.0 VS ie</title> 1 d7 x, _" Y; [7 T
<style type="text/css"> * z" K& A* d9 R) k! ?! H$ P
<!-- 0 ^% m) ?- A2 P+ R, C/ X' k
body {
' p/ u2 R; z4 Wfont-size: 12px;
! J4 K* v6 w5 N$ `2 htext-align: center;
. j) L4 G% V! umargin: 0px; * J$ U1 R5 w/ t2 |2 a
padding: 0px; ! _- W8 g$ Y1 A; G, W0 |
} 0 K! Y) C. J' @; h- v8 y2 k
#pic{ / y. q; o- Z: ^% o/ P/ L) v7 V
  margin:0 auto;
8 l0 h) p" }6 x: c  width:800px;
* j" m5 S, ~3 ]. Y* u  padding:0;
) G8 ~; F9 N9 `# j$ D6 T  border:1px solid #333;   B5 Z8 A4 ^1 T
  } 7 L7 z" V& r3 W* g! X
#pic img{
7 ?4 B# c& x+ ^5 m, A7 d" a    max-width:780px;
3 Q8 J2 ^7 d' u- D" dwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
0 l! S$ I, Q8 w, W/ b4 oborder:1px dashed #000; + G# F9 _0 E. x% M( j( i; E
} 7 E% \0 }; Z9 O& d
-->
! J* M3 M+ M# P$ `# \</style>
% b8 t  l, H( A3 @, Z</head> 9 u! y  z* r! x" t
<body> 2 |" a1 U3 c! w
<div id="pic">
7 h7 s& S3 w( P+ z8 K& [" ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ G: R  q& i6 u5 g8 _
</div> " A6 J# g/ O7 u$ r# e' }( X  Q9 a
</body> : f0 o! g- P: C; h
</html>
/ c' r; J0 b7 \" s6 G& W1 s! n/ f( q
百分比适应:; u' r2 n' C" {& l. t- \& d
以下是引用片段:
8 O* E2 K3 j" v. J9 O. Q! Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 7 v3 a+ Y( ]  X( ]- N& e
<html xmlns="http://www.w3.org/1999/xhtml";>
( ^& n  Y9 l0 Y$ R/ L* e# Y9 G& j<head> 2 y6 m* N6 D0 `8 E( o+ `3 d! J
<meta http-equiv="Content-Type" c />
: h) T/ I5 @/ o" J& m<title>css2.0 VS ie</title>
* o% \. X3 w2 {5 r, t<style type="text/css">   d% s0 x8 P& r  p0 y
<!--
" F9 X7 g) M+ qbody { - }  S4 t2 ^- [6 I
font-size: 12px;
) F3 g' P, Z; T5 N1 Ytext-align: center; ' B9 Y8 ~4 p, a& ~, |$ |
margin: 0px;
, v1 A: j: P; A/ X- D; k# {  wpadding: 0px;   O$ D1 `9 b! w4 }
} % r3 [0 a2 g% j  h; U
#pic{
! }- H* Z; C% ], h, e6 \  margin:0 auto; . V. X/ Z0 I$ Q& l
  width:800px; ; |8 `' v% K0 b1 W* Z# F
  padding:0;
  L% W* g+ [8 i5 h' D0 B  border:1px solid #333;
; I+ Z3 T! O. Z% ]3 K2 i* x8 L  } * b: l3 l& w$ I6 f( Q7 R- B* M
#pic img{
0 B: a0 ^# I" ^& M  z4 L2 A; k0 t    max-width:780px; 9 \' m' l3 v: X# y% m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 K9 ~, I9 A1 [! ?3 j% r/ C* uborder:1px dashed #000;
) W/ S6 k7 F# o. \5 F} 9 V. z  z5 o5 }! T
-->
7 Z: w, k, B- q" V: b</style>
/ W% @& |0 F. d4 S</head>
3 \$ e( N& {6 \; h  G# ]& i<body> 4 \8 L0 G& x5 l+ B# g) K
<div id="pic">
) n: M+ }1 p% x. R0 j/ c" j( |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 Z( x* m7 N: Y% w( T1 N" Q
</div>
0 i  I% O3 d1 W7 {</body> + O( C$ D4 d  A* z7 V
</html>




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