Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 X, M3 ^. p( g  f7 v关键在于:max-width:780px;以及下面那行。
, P( f- p: s! R固定像素适应:" L" g; b2 k3 x/ l/ N* F- \
' n/ O- p4 s5 K: P( x! v
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>  以下是引用片段:
+ e3 ?3 f* F* c5 }$ ]- B( Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + A" n, i. y, m9 M/ }% u/ E2 x
<html xmlns="http://www.w3.org/1999/xhtml";> $ N4 q1 e' l( |; r: Y7 B
<head> ! K2 T$ g. O5 f% K
<meta http-equiv="Content-Type" c /> 5 o) h1 V, m0 [( n. m  L
<title>css2.0 VS ie</title>
7 S1 y7 Z& u' w/ @<style type="text/css"> ; w" ?) \/ z8 A0 p$ X' u5 G+ U
<!-- 0 Y5 O( p* z. i$ A2 R: M! s
body { 1 y1 ^- t- _4 z4 U! L& P
font-size: 12px; + \+ P! U/ O- `% [
text-align: center; 4 C1 _! B: |9 \. A. w$ f+ \& \
margin: 0px; 1 ?3 S  |- I% ?
padding: 0px; : @5 F! V6 H6 d) d, M$ S0 Q8 j
} 5 K' u: y6 t1 m' A
#pic{
1 s" i  e* \; l+ G, u" Y1 S! y4 `  margin:0 auto;
& N5 o7 L7 Q) w$ M0 C  width:800px; 1 i2 f. N: Y* O) T, ~! f1 h
  padding:0;
6 }1 h0 {  m  E: ]: V& ?+ B  border:1px solid #333;
" _  H# R- _! d  } 9 M, B$ Q" C/ Z8 }/ s
#pic img{
# y1 C1 D: z7 `3 w  s    max-width:780px;
: x$ ~/ R0 C/ \% I$ o5 I  _width:expression(document.body.clientWidth > 780? "780px": "auto" );
! h6 L" ]& M9 A/ ^3 Hborder:1px dashed #000;
0 D% f, h( h9 h7 z) O% T} 4 @: i/ ]: u4 {2 H/ C; t' Q
-->
& t( |. r8 d0 x9 s6 v0 [</style> : O% @* G9 u  w2 j
</head>
4 ?8 b+ J; Q$ u  J5 |+ v: g+ D0 ?<body>
+ R# O+ Q" W' f. D1 |! x! |: c<div id="pic"> 6 @  O! h) W8 L9 b3 n  ]# U" r
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( U9 J: L, n) `  V5 h" }
</div>
" i% @5 m( z1 r) c</body> ) E3 J9 I% R  q9 h- P1 C
</html>
* ]2 [6 f, E& a5 h* G: _+ O4 T. r2 S( H& }
百分比适应:& W# J7 o* T2 g% |' C- O+ u
以下是引用片段:& b$ v$ n# A" w* }5 ?6 g( P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 i# f  R2 |7 y2 D/ A4 C  t
<html xmlns="http://www.w3.org/1999/xhtml";>
2 l3 a- u7 Z; ^( ]0 i<head>
4 K, e9 A; G  J% s5 }<meta http-equiv="Content-Type" c /> 4 S4 `0 i$ ^7 g* S% o; S0 B
<title>css2.0 VS ie</title>
( U/ _" C$ R; L! N* N<style type="text/css">
/ k& q0 e+ T/ d* T0 g<!-- : A' O! u* b% e+ t: _, u
body {
" U/ O+ h+ b8 }7 w# J, @  afont-size: 12px; 4 ^! D2 `3 H! A3 ?
text-align: center; + L. E* ^& I/ V) S0 D
margin: 0px; + H  [: w2 R/ p3 q2 J. C5 D
padding: 0px;
4 |1 S7 e+ b! |6 l  b} - ]6 j+ g, v; ~1 h, T
#pic{ * W- i2 a& b9 C
  margin:0 auto; # p# t& o1 f+ u3 D* V+ n/ A3 Y
  width:800px; 3 B8 f: e. `) I0 n& m
  padding:0; 7 |/ F  E; F6 x
  border:1px solid #333;
( e, G/ ]4 g6 B* S) w3 D  }
5 A# X  V1 g4 x5 |#pic img{
) G7 V5 D/ _0 ]: z    max-width:780px; * T4 p9 m/ ?# r. r0 }
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% P6 d4 n3 f$ a6 Yborder:1px dashed #000; 1 |( g3 z. E+ S( r& m  ?8 w# v
} # W" {4 T7 H" \, h& Y
-->
# P$ m2 S5 N$ o+ _) y</style> ( A& E" R& i; A7 q
</head> $ ~  m4 F! A' q! f. j) |
<body> , l# U0 ]; l: I4 w+ f
<div id="pic">
/ f, u5 b9 z3 i2 [<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> " C- r& n6 i7 }1 t$ [
</div>
, }3 Z2 \. P' o$ A</body>
: F& h7 ^8 s3 z, J/ }4 M& ~5 y</html>




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