Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 N' e0 l. e' s- o' T1 _+ z
关键在于:max-width:780px;以及下面那行。
2 i% E' |: i+ q# h# }2 F0 d9 a固定像素适应:
. Y: I8 A( n! m* E
8 i% h( N% U& G, [) p- h7 z* |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>  以下是引用片段:
. G( i# {& P- }$ J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , I2 x# C- A$ g& u* M8 N
<html xmlns="http://www.w3.org/1999/xhtml";> 1 F5 W  _* V% M4 M
<head>
1 U' D/ p! u0 \. h9 h0 D<meta http-equiv="Content-Type" c />
: r; ]0 ~! t. n' i<title>css2.0 VS ie</title> ' Q$ Z) t. S5 _" Y
<style type="text/css"> $ r( }  \3 `+ ?" i) D
<!-- % _0 N* c% ?7 E* d
body {
& y* u# G. r7 [# U/ Z6 _, N! Vfont-size: 12px;
, ~5 ~, [$ i4 X3 o4 }8 I& btext-align: center; : M6 E3 V. ?/ q
margin: 0px;
; r8 k2 y4 s# F/ c& r# }7 `" Tpadding: 0px;
  Q9 b' A, Z' A; m}
7 A# ~& ^3 F7 {1 E/ e/ d#pic{ 7 o3 P" j" J1 h; ?' ^. g! r
  margin:0 auto; 5 }) e6 S) b& k( x8 r5 D& w
  width:800px;
) j# x; q* n  ?+ ~3 x1 h( U  padding:0; 5 L9 b% |7 n) F5 I: S
  border:1px solid #333;
# h9 e! i! g" c5 T0 |  } ; m* `6 K! a+ w: B# f$ a! d# Q! M
#pic img{
5 V8 k3 s: @8 J. Z7 G3 D2 a: j    max-width:780px;
3 w: W" s4 c; Lwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
8 o; N: p5 B* g, G, K. l& v3 d8 Nborder:1px dashed #000; ' {7 f+ ]& L' z; H( V" ?8 X, \
} . Z' O& U, n0 J% o2 D& c& o
-->
. u+ n4 J9 n7 e: u6 f0 Z</style> + s+ u- d) L1 m9 E: ~; w  T& |
</head>
, s4 P% j$ I8 U5 Y. z<body> & |2 r0 d! M5 S+ _  Z
<div id="pic"> 6 o( E& l/ Q$ l: K) K6 D
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! a0 C6 @( R$ {. {) G</div> 4 w+ A6 E. G8 M2 O5 N% {, E3 z
</body> 4 S; K* d4 s2 N
</html>
7 ~9 J' f( o4 @* i- a' b& Q2 {8 y" v3 ?0 X% x* ~
百分比适应:: h( }; x/ S& c
以下是引用片段:7 r0 B' @" y# c1 q; @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% h: X5 W5 `% t2 L<html xmlns="http://www.w3.org/1999/xhtml";>
7 U, E! p, Z+ g% p<head>
, z: k* ]+ y3 v% N+ L3 m<meta http-equiv="Content-Type" c />
! Y( E- W: [+ K3 G" |<title>css2.0 VS ie</title> 6 J& {; M$ [$ J, C( d# s
<style type="text/css">
6 i* X3 J' j# k4 s1 t. X<!-- , }2 B& g: b2 t% [
body { 2 Z; Q- E& y# m, O+ G& L7 h4 d2 l, h
font-size: 12px;
" M) ?6 ]" o& ]" Y1 j9 |7 \7 x: @7 Htext-align: center; . O9 a# Z) T6 }# Z+ N
margin: 0px;
" ^: ~- V  G* x: J- }$ Hpadding: 0px; . p! |8 h+ Z& z) s+ j
}
  y. ?5 h7 x2 `$ q3 x6 \" ^#pic{ 9 ~' [+ M2 y2 }: y$ ^6 z& N: V# P
  margin:0 auto; + s8 r* _( I  c" [* A
  width:800px; " K. I$ `, m+ R2 y( U
  padding:0;
( V7 s+ V* p, U! p- f" _  border:1px solid #333;
, }  \  L: G- j  }
0 t' |% L9 K4 x# ~#pic img{ $ S% `4 \( V8 h2 Q: W
    max-width:780px; 8 S! i* N4 n7 t$ G9 c4 O: j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; i2 ^! r& N$ a1 x; ]border:1px dashed #000;
* ~1 |6 l7 \+ v2 J& G' N} , k2 t9 ?! ]( Z: T
--> / r0 M5 ?4 x/ X
</style> 5 [6 T4 U% U2 N+ Y& [; Z% M/ _+ b3 h
</head> 5 y, e7 ]  q$ G4 K% x) q$ R
<body> 2 |; X. q- x1 ^. k5 N6 N4 p8 x
<div id="pic"> , V* {1 k3 v0 |" S; b
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 T0 J7 A) u1 M8 c% N& z3 q6 z
</div>
8 l0 k: }" ^6 J: q! s8 I</body>
2 t  \7 L% M0 ?# d: B2 z! w! o9 x</html>




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