Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。0 }" s/ P& f% s* ~- G: d9 F
关键在于:max-width:780px;以及下面那行。
% \& r8 x2 V. k: M固定像素适应:  k% x* n# x# u4 @$ O& q# O) V

# \1 \8 s" S: K* Q$ \4 ]! |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>  以下是引用片段:4 z9 {5 X+ `4 x) D, K  \& v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 ]- Y, J/ ?6 Y- z. d' ]<html xmlns="http://www.w3.org/1999/xhtml";>
& X+ S$ I. @) _7 K<head> * U- K8 o9 \' j! f& J0 n$ z
<meta http-equiv="Content-Type" c /> & r& k4 D2 e. d* {/ Q% w
<title>css2.0 VS ie</title> # O/ ], F$ w+ B5 ~7 z# I. w' \
<style type="text/css">
) z5 e. d. r4 j2 M, C) p  M0 c<!-- . k* o4 a3 d; X+ Z3 p1 D
body {
+ r) x% a5 w' D  i; ~2 Tfont-size: 12px; ' H- b( ^" d* t4 i
text-align: center; # e  Y2 q$ w! y1 A
margin: 0px; ) Z8 f" e3 G7 F
padding: 0px; # B2 j, Z, f6 @! ^4 r
} $ T1 c2 i) d) \# N+ T
#pic{
) m  M1 j$ `) W4 U( h2 ^3 }  margin:0 auto; 6 Y9 m" r: t! ^3 G. p# [: u7 M
  width:800px;
8 N9 Z& T+ h7 ?6 L0 O9 ?, b  padding:0; 5 v( @% A  t% u- n
  border:1px solid #333;
2 u) ?' z' W' x: k7 \* G  }
8 r  q" ^4 P2 i( x#pic img{
* B2 g/ r8 e! H; `    max-width:780px; 1 M: @. t$ o. r6 W
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ! v) o# o7 l# L" v
border:1px dashed #000; . _4 I9 M! U6 a% I! o
} + Y/ I0 }, Q1 n- m
-->
& [  M! V1 j9 H2 }</style>
% Z. b6 I: v& S0 o: C</head>
9 f, R+ O7 J) [0 f3 C<body>
. Y' O# }0 |8 ~$ F5 P9 w6 c<div id="pic"> 2 e0 j* @# ]2 z& d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, r  E( ^) j/ u# A" {</div>
2 C* w8 e$ {9 G6 K" @</body>
# y! n. ^6 y2 a2 F- S, k' q. M; ^, i</html> ' C5 C) c: S5 ]! X
1 K3 D/ n4 m# ]% W% _0 [. n8 i
百分比适应:
: D( x' P- z) b' x) e' U1 e以下是引用片段:
" ]7 x! ~0 z3 A; R$ X<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 ~% ]; ?7 f- ~. n3 \4 A<html xmlns="http://www.w3.org/1999/xhtml";>
1 w/ P9 B1 B5 c  b/ {<head>
$ c# o7 t# T- W( J<meta http-equiv="Content-Type" c /> , m% U. O, a- C+ w) z
<title>css2.0 VS ie</title>
5 f/ H: d8 u: {: j# A0 l! y<style type="text/css">
# X( V& _; C; e. a# c<!-- : u8 n% v/ ^) _6 ]
body { 6 ~( Y4 A- k- w) A' w. U
font-size: 12px; % b: {5 N8 }9 U6 y0 y2 M( U! C6 y
text-align: center;
6 O8 O$ n$ ?; `margin: 0px;
* }) {6 P$ J1 j. i7 t/ N' Y7 R5 tpadding: 0px;
+ g9 s: J3 D! f: k4 [- E+ C, x} 7 c: I1 W# ~( m3 m, M8 Q
#pic{   [- c% b: X6 ]+ w9 y/ W- k5 d
  margin:0 auto; & a/ X% c9 X2 ]  {1 H
  width:800px;
- U! U' a& t- V+ L( z: G" Y6 K/ ^  padding:0;
2 U) M: T& \0 L( c. b/ p  border:1px solid #333; / L' Y7 D: f4 t# v6 g
  }
' P; k1 _9 e: W, o9 T! s#pic img{ ) C# B  m# b  G4 {' l
    max-width:780px; 1 _8 {5 S) `. ?' ?; M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 9 y) H' k4 l1 L8 j! l- B% O) l
border:1px dashed #000; - @3 V# U; J( E! Z
}
, m3 _4 u. Q( G  Q  m& t& K$ }8 L--> 3 E/ P- G. S% [/ y, e2 d
</style> 9 [; z$ u3 ]) y  g7 ]8 p! [
</head>
  n5 H; w- O# ?, y<body> 6 R& \+ p4 G! h9 \% t
<div id="pic"> # g" |" b  v) f& L0 w$ f3 F
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * }& C, D5 `% n! N2 J/ C+ M
</div> # z, C4 C, a4 v6 Y+ u6 @% X6 g
</body> " G9 f3 F, R  O5 f! w" p* t3 K8 N% L
</html>




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