Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& `/ Y0 c- v5 h关键在于:max-width:780px;以及下面那行。4 c! D7 z1 T/ D+ w! Z9 _0 R
固定像素适应:5 z3 V- K( u) n( u/ h# F7 y

" l1 e, F# m' E% W( 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>  以下是引用片段:7 m: u/ u: O. O* A/ L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 h& N' Q1 ?( k* v3 |( ^
<html xmlns="http://www.w3.org/1999/xhtml";> 8 j6 ?6 Y3 L; {# H( l8 V5 G+ X7 r7 \
<head> ; b- F- ~8 h$ D4 T
<meta http-equiv="Content-Type" c />
# i; z7 {: ~( |& u+ g<title>css2.0 VS ie</title>
8 o% H4 I% O- C4 g4 @+ _- p+ q& q8 ]<style type="text/css"> 0 L5 z; O. v/ A5 T
<!--   k0 f% O$ V6 G8 ^. F5 K
body {
  ^# q( k, G5 t! j  n3 G& Lfont-size: 12px; 5 p* M' K8 b! I& @! A
text-align: center; 0 e) D* ?+ Z7 [% h& e! V0 X- U6 i
margin: 0px; 2 {/ |( e: z% c
padding: 0px; # @! ^2 H) i% @' r2 A
} 0 K, n6 v8 s- _% H( ]9 y
#pic{ 4 X" ^$ p1 z- r
  margin:0 auto; / @. K, L5 U7 [' n1 A
  width:800px;
, C% B- y1 V8 p  padding:0; # L0 C( b; [0 \5 u% Y- }! r
  border:1px solid #333;
1 k; |' _8 s9 [  [( D9 S  } 5 V. }$ L# P3 a: D7 F* w8 p, h" I
#pic img{ 8 X) s& E+ A0 _
    max-width:780px;
( o. ?" z" \5 jwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
* ~7 `! W& I0 Yborder:1px dashed #000; & \3 v8 W$ R0 S9 M
} " h: S* D( _  e
--> & ^5 L* u/ |+ e; p: z* H; o% ]+ |- Q
</style> & Z( k8 U3 K3 T2 \' A) @) o
</head> : l' Z  _, N4 v* T4 k
<body>
6 F, s/ S9 ]2 e/ o) f<div id="pic"> 0 I3 ~  T7 {0 ?/ U  G( f% _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 s+ F- C2 V- Y% E' g( B* C+ B</div>
9 q+ `) H' E5 V( M' H2 ?</body>
3 g/ {% d" C  |8 g+ G' V+ U0 {6 |</html> + d9 u( _4 b3 h2 B6 C) ~) p$ R

& |$ L9 }" a) V1 ^  ]8 G百分比适应:
) F" z1 U# ?. }1 V2 k以下是引用片段:. u! m2 Y5 F1 v! P9 m( f& B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 K  s9 Q) \5 E) F: {7 w<html xmlns="http://www.w3.org/1999/xhtml";>
0 m8 B) o% e( X/ a) w' V0 E<head> 5 i4 u; w7 Q$ E" V3 l! R
<meta http-equiv="Content-Type" c />
! K4 d. R' T1 D) i9 I<title>css2.0 VS ie</title> " T6 b( i0 y1 W
<style type="text/css"> 2 A) E* V6 p* o# U, r
<!--
+ g! {8 R! _; O; \8 Hbody {
+ \% _9 P" N) L/ l( d0 o& \1 j$ qfont-size: 12px;
4 [- Q+ w3 [1 S. Rtext-align: center; 9 I: ]4 \" T" M7 m$ }
margin: 0px; 5 s4 B( r" z* }
padding: 0px; 4 Z) v3 Z9 }& `# K/ S# A
} " `' \: v1 p% T( R3 n1 J
#pic{ - m' J; L6 l* d7 G4 M" K, z' Q) d
  margin:0 auto;
7 w  ^/ Z0 j6 x  width:800px;
8 O# m9 j4 {7 z# _9 G  padding:0; 6 H, p6 p) e+ Z1 ]  i
  border:1px solid #333;
4 B# _4 O% u; W& ~- R  } : p" e1 U( g) K9 c* ~, [
#pic img{
$ ]( E2 @$ U8 ^8 O; Z    max-width:780px;
0 L: J, s2 {" Y* D4 }! V' hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , J5 Q7 u4 C5 [: O3 k' x0 O8 a$ R
border:1px dashed #000; 7 }! f, k6 k; r
}
7 M) z9 R$ r4 ^4 M- |--> + E- d# h2 l8 j/ J$ u, K
</style> : |7 L$ c8 D+ j" E( f
</head>
% o1 |) @6 M1 @, u% `<body> 2 W( Y5 O9 h( a
<div id="pic">
2 P) \: E( n; A2 F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & W4 \. C9 Q; R, E8 B9 X: R
</div> # s2 y. y; _8 K- p. |- D( K; N
</body>
# n0 L9 ?, v) B6 h9 p% Q4 k6 m</html>




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