Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 A0 H! C/ |. ]+ l& O( `关键在于:max-width:780px;以及下面那行。: j; L/ S  _9 _) `3 U
固定像素适应:
" F# R( N; }1 H% u" X1 x8 k
* l. Q  l/ k0 u5 u$ ~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>  以下是引用片段:
" O8 d- c/ e/ l: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& J7 w" R0 P2 R4 U* @4 m+ O1 V<html xmlns="http://www.w3.org/1999/xhtml";> # z4 t8 T8 o3 R/ E# O. J" y
<head> 2 N- J5 k& g) A& ]& m* Y3 b% ^
<meta http-equiv="Content-Type" c />
4 D1 m/ g$ ^1 D; r# I<title>css2.0 VS ie</title>
8 y; a2 ]2 ~# V0 G* S/ I9 N! k<style type="text/css"> ( l5 {$ G/ e' s' Z1 {
<!-- & E, |- b8 g* x! d! F0 C( V7 l
body { . t  F6 N, O6 a5 Y) @
font-size: 12px; 0 b  Z  _/ K. l9 N, H
text-align: center; 3 w! \  a5 Y( V
margin: 0px; 6 W0 r. C# V# ~+ r! h' A: j
padding: 0px;
- a9 d6 {8 E- n/ b}
$ O, U" C2 G- r* N; t#pic{
0 b7 T' J/ D, N  f2 j4 z* [" u7 ?4 d  margin:0 auto; + ~4 t! U3 O! w) q8 [
  width:800px;
% h! x+ a" n" a/ x( T/ B, Z  padding:0;
" n$ U/ N' k4 @! X' Y% T5 C  w  border:1px solid #333; 8 i% u6 ^) Y( P
  }
/ O# p# b( F, A; [) Q5 y6 c8 n#pic img{ / p: S9 K9 |  f/ X
    max-width:780px; 9 B* N) z. z) Y/ i+ p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" Y7 Y1 o& S# P: E* S' lborder:1px dashed #000; 0 i8 ~; V0 F0 t1 Y/ g2 F
}
; F; I5 w& t- O--> , [6 s/ N$ S" {1 f/ z9 W! W
</style>
) x0 y- y% u7 C. w4 {+ R5 \</head>
0 [6 S# O+ {" N+ J+ l2 Z' u<body>
% r9 s3 W/ H$ a<div id="pic"> " o6 t% D) I( ?' [! G% c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) I* v. I* r# _/ I2 V) z; l</div> 0 S1 j& a. }- L" }# H9 y7 R
</body> $ P4 N1 r/ B! v/ J1 H$ P
</html> ' ]" ^: ~- ^! [# |2 X) W+ C
$ C. y1 m7 v  v+ ?$ j
百分比适应:6 Z0 C2 G* d, F( q* l$ X) `
以下是引用片段:1 @( u. ?- D' _( N$ e, {- x0 v" a4 }2 [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 Y$ M$ B, j0 h1 J
<html xmlns="http://www.w3.org/1999/xhtml";> ! D! c- {4 }$ w8 E1 L
<head>
7 f0 C! }: e9 Y) ?& ^6 p! C2 j<meta http-equiv="Content-Type" c />
$ _) e; _/ r% L* o! |- C<title>css2.0 VS ie</title> 6 E& V9 V' V$ ?+ y* g! R, O$ R
<style type="text/css"> ' h4 g* B8 l% A5 ~8 N
<!-- 8 s  j8 x( Y9 @/ U* q0 d, k7 Z
body {
5 N, F) K- u/ Y: ]0 L& w# w* xfont-size: 12px; & X- k$ j' z; w4 Q" |( ]
text-align: center; 4 z. G# R/ w3 l& I
margin: 0px; / T% D" R5 r# z' T: c
padding: 0px; 3 k, j! X/ u# E* w' k7 S9 c
} $ f. t! C& P9 o# _) z! J
#pic{ 7 ^( G3 H6 u6 Q1 B: {; N! C0 c
  margin:0 auto; + X& T, P- {' C. _+ P  u
  width:800px; ) u/ U% T( O2 M/ N4 D  A( `' v( e
  padding:0;   v; w- `8 w2 B6 s& }5 ~# P
  border:1px solid #333; $ b( {  F5 X* v
  }
1 j! `" ]3 Q- |- V/ C) z3 G' |#pic img{ , ?2 G6 X8 s/ i3 ?
    max-width:780px;
& q5 X) i% L7 y$ _7 M" Twidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, w3 ~& G: O" F2 g" M6 wborder:1px dashed #000; 8 Q) L8 ~, q; d' ~
} " o0 b3 r# r+ s% \; q- e
-->
! s7 g+ j/ ]  L# b% j3 |1 r6 }3 W</style>
/ W! @8 u2 M  F7 R</head>
0 d& C  q$ d& g( M1 i7 x8 D# u<body> ( w6 y& n/ f9 H! T/ _& `/ {; A* g) B. F
<div id="pic">
5 q' T$ j. T( ~/ W1 L7 N<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # s+ Q6 o# U4 g) C
</div> 7 r! P7 a+ J6 B! y
</body> 7 y; Z, C1 k- _% g) B
</html>




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