Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 H; J( O5 I: B$ l关键在于:max-width:780px;以及下面那行。
- X. i3 c$ B, n4 }2 T. u$ f  o固定像素适应:
7 h6 l( G) ]8 b8 V1 [$ A9 `4 V* H- \8 I" s* ~6 b+ W5 H
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>  以下是引用片段:
% [, o4 r$ D9 o6 ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - c4 W3 p& I7 q  W/ B; D* u) r0 I
<html xmlns="http://www.w3.org/1999/xhtml";>
( u/ ~' t; B/ z<head> " a4 k2 t: g8 W& U6 d1 u, G
<meta http-equiv="Content-Type" c /> ) O9 m; G/ l$ I- Q2 M
<title>css2.0 VS ie</title> $ A& p, v" ~" k7 E" s
<style type="text/css"> ( Y) A: w' K& c2 {4 b8 Y/ {3 i
<!-- ; |' N1 ^7 C7 Q* R
body { # ~  |& f: U8 C' d1 q# h! r
font-size: 12px; 8 I$ o7 b! \" ^9 y, ^: f: D8 v
text-align: center;
2 U$ e' w+ B* ~: r* Kmargin: 0px; . o9 w$ Y% L' g, \$ k. h
padding: 0px; / F5 U5 A- b# i3 E% N; M/ B
} % J. E9 u5 ~" F- L3 K
#pic{
' i% c' R. M/ S7 \, r# k  margin:0 auto; ) m; S: G4 b+ P! ~+ E, U3 m
  width:800px;
! K3 \% z, v$ G8 ]* `  padding:0; + @- X# x  t8 W+ I( j% W( g
  border:1px solid #333; : {) ?4 G' X, X" v
  }
6 [7 A6 ~  v5 e( O- B& |#pic img{ $ @; q9 m2 n' H6 a
    max-width:780px; & V5 q, x7 M! z$ a6 l/ _
width:expression(document.body.clientWidth > 780? "780px": "auto" ); / l5 J) k+ E' |( z9 x4 @  T
border:1px dashed #000;   H5 G1 ^  |( }
}
8 ^, y$ y( r% r# o  u: T-->
0 d  H4 i" P: @</style>
! E8 \9 Q3 f! l( j- {5 u</head>
* g4 e; v6 ]! [8 j% p<body> 9 F3 A( c+ ]7 D% r& N& x% X9 R. ^
<div id="pic">
8 V1 j' \7 {. H  [0 k- T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% O* E) X- ~, O* q9 d; l5 R2 |</div> . [; `( }! O) F- F
</body> + D7 ~7 k& v$ }
</html>
9 T! U$ c+ g5 i% c! R9 R4 k1 m5 z3 S/ `& d0 W- d9 K$ Y' X
百分比适应:
: R2 Y" z$ D, y: @9 C+ l以下是引用片段:0 m& A3 b3 X7 N1 i+ w1 Y; k* {" |/ ^* u2 J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 ~& E, R. s- I4 e% ?1 s
<html xmlns="http://www.w3.org/1999/xhtml";>
  }7 j% k5 x) \9 i- ~3 E<head>
( }( L. p7 K1 Q7 _/ Z<meta http-equiv="Content-Type" c />
$ i0 d, w( q4 C- j# F4 K<title>css2.0 VS ie</title> + ~& `' C/ {' e; w! X- b4 `
<style type="text/css">
: s9 h9 @4 c2 H- L1 o# F<!-- , I+ ^$ @" }/ h4 @1 |6 s9 L. j
body {
# a8 K: [, D( @$ o+ {font-size: 12px;
, ]  w* f5 q6 S  D  ?. i0 etext-align: center; . Z1 j3 ~4 [! O  `4 F$ p
margin: 0px;
( A2 ]/ E) P$ q4 E1 v8 opadding: 0px; 9 e' n9 @3 g) Y7 S  `
}
: O! L3 ~& u# p& z7 m#pic{
1 \; _# \. f9 X6 Q, O2 E5 ~2 g0 D  margin:0 auto;
: s+ Q. O' w: o- W: {  width:800px;
' n2 ]* w$ z# i) H& e  x0 x  padding:0;
. |) S: }$ F  P! @$ T  ?  border:1px solid #333;
$ ^/ _. ^/ s% k/ P4 Y, J. _  } 1 u/ D, r# B: h2 R
#pic img{ + d4 |1 C5 V% }
    max-width:780px; 7 d7 ?0 E, K$ z* Q9 j' @. H% O
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , ]9 ?8 a7 \" Z' j1 t* Q
border:1px dashed #000;
6 D6 M. v. S7 r+ n: ~: E, j$ {}
8 r; d2 X, \! z2 N7 a* k-->
; _/ x( L  t( \; J4 w  T. h</style>
/ U7 ?( q! p; I</head>
$ k" {" I3 R! i. \% f: u- E1 U0 j<body>
, R. \: t7 m- ~" H<div id="pic"> ; ~* F5 _: D' R. l" w+ H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * r8 V) }# |0 s3 H3 Y  M( h
</div> , ~: _+ m7 V" `0 h( ^* T9 s: f6 P
</body> 6 _0 d& l, |% w, ]: \! A
</html>




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