Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! s) ^8 Z( d+ \! R0 |5 m
关键在于:max-width:780px;以及下面那行。' W- E1 x, Y6 m
固定像素适应:5 l8 t  t9 S. v4 v7 f  \% b

: I( u, k* r% Y* [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>  以下是引用片段:+ j0 c2 v) E6 P1 R7 c' }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 X  r: F, F. H, A$ N- G<html xmlns="http://www.w3.org/1999/xhtml";> 3 }9 F3 w. R3 ?3 q2 k8 `
<head> 2 g  l! t5 M. i# t
<meta http-equiv="Content-Type" c /> 8 V" b& @9 s; P: E
<title>css2.0 VS ie</title>
' a! Z3 E% f' R6 b# I<style type="text/css">
1 x) W  S) \& n' Y6 M/ @. B<!--
1 H: K5 u. V! ^* ^$ O2 D" Ebody {
- L/ n3 w+ F. |& p* ]5 ^font-size: 12px; " M" ^8 r) S9 R8 _' j4 }
text-align: center;
; f; l+ z/ R6 H: emargin: 0px;
. t' ?# ]0 r% apadding: 0px; . C; ?2 q. \" J" a& I4 d& v
} / G- |& E. g' B# H, u4 O
#pic{ 4 E; E5 \/ L2 V
  margin:0 auto;
; x' ?7 k5 S7 n$ e7 O4 d  width:800px; ; B! d. x9 S* i' w0 U! K3 R
  padding:0; : J9 F: b3 D0 k% E8 K- W( M" C6 k8 y
  border:1px solid #333;
& U7 m( @+ D  p  }
9 J+ e+ e- V' k) m- S$ m* M7 N$ k#pic img{
& J8 i+ Q9 f; E    max-width:780px;
1 D% Z# v6 l; b2 ?7 Cwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); * L  ~* I+ L5 o: p! k
border:1px dashed #000;
* u" J# e3 Q9 _6 c9 t}
* J0 @8 M: A& v0 u--> . r" `% Z* D# U' _
</style>
" n* c# a0 p) l! |' I1 _) ~0 |</head>
; }) w6 }$ c; w* O. k- i5 _<body>
8 o" [1 m& A9 w+ g6 ~<div id="pic"> 8 Y6 ?. Z$ x) ?8 ^0 @+ Z; A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 \2 p6 u/ }& j" M</div> 7 N2 q2 X7 B0 v/ s4 h) Q
</body> . R/ p" T0 G7 W( @
</html> - [  w' M2 M) v. I/ E) f  C

# \6 U# p8 n2 {, [' H百分比适应:5 p" N: P( Z! G6 s
以下是引用片段:4 `$ X7 @0 Z" E/ M# Z9 W& \, D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 }* L- b0 L: _# i. [<html xmlns="http://www.w3.org/1999/xhtml";> 6 f% q/ ]2 }: o
<head> ) G6 G! ?+ E- ?  w* V: K7 q
<meta http-equiv="Content-Type" c />
: ]* Q5 w1 h3 v1 n<title>css2.0 VS ie</title>
7 F6 V7 _: B* }. \<style type="text/css"> 2 f, q) G7 g8 [$ _# A+ d
<!--
" u5 w' H5 Z0 ~$ z9 `body { 5 t5 a* X: e% w4 {/ ]
font-size: 12px;
- ^/ W+ y: k& ]* Y1 Ntext-align: center;
+ f; r( g  m8 e/ Dmargin: 0px;
$ ]2 a6 l* ~7 m7 q$ ypadding: 0px; ' ?- u/ r" ~" o' t6 E
} 2 K! M/ ], ^; R3 D
#pic{
: U6 P- }1 q" h0 \# W  margin:0 auto; ( o) [. p; E- A3 \. A( \
  width:800px; * \, E/ S6 ^: u3 h2 p7 N
  padding:0;
4 y3 n+ R$ t+ `$ j# }( E  border:1px solid #333; 3 [. r- W; W. X& _, f5 Q
  } + w. w; l  [' D. i3 b9 r8 z
#pic img{
  j0 ~4 ]' u' ]3 z7 U" V/ `    max-width:780px; * b! z4 E6 u: S$ a: `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : N1 K9 |  f1 w+ a( [+ T. j) o
border:1px dashed #000; 7 w" u1 w7 f& p. |1 q$ W
}
' H1 T& ]2 p/ ]3 d( u: h-->
9 \3 L) o7 M! d5 L</style>
9 T7 L2 V3 {% p! f4 P</head>
7 p: A/ w8 s8 a' ^5 ~9 a<body>
5 I' T0 D6 w" }$ \( m/ ]* W: c<div id="pic">
* s2 ~4 t9 X# _1 o9 U<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # H  A! a1 C7 ]6 M! b0 i  w
</div>
. c( U; z+ i- w* ?$ w/ t) O/ h</body> ( d  X5 Z' \5 w8 `* l$ T3 L
</html>




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