Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* D  B/ k! l, y3 t  f* u
关键在于:max-width:780px;以及下面那行。
, _' ~$ j# y! |1 a固定像素适应:
, m$ q6 G$ I/ Q" L1 ]" ?2 Z! w) m4 X7 [/ l% b' s- e8 U) p
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>  以下是引用片段:
& l# Q/ U1 F3 H) c, {" ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 C& H  i0 H* M9 s+ G
<html xmlns="http://www.w3.org/1999/xhtml";>
% g& u/ ?+ {, p$ K8 F& b5 a  q<head> / d/ t$ x; r) U! k
<meta http-equiv="Content-Type" c />
$ u, E3 y8 X7 p4 z9 ?! f<title>css2.0 VS ie</title> . t) p+ S2 k5 p& K' T
<style type="text/css">
4 E$ V+ n& x" I0 X<!--
6 D- N5 a# X; E1 o5 Y4 L  }body { ; P6 l$ z" N0 S
font-size: 12px;
$ t0 Q) C9 D0 W7 i+ `! m% ]7 Etext-align: center; 4 R* g3 x" C6 v  v$ J: Z
margin: 0px; $ i( ~1 R2 `% d
padding: 0px; 5 O8 c1 H' o" X9 O+ _# `* r$ u
} & G4 u: M8 ~( K, [& H& p4 k: P
#pic{ ( `% j$ w% K& b: X: o9 o
  margin:0 auto; $ M  f) ^5 u$ B" l2 C) u
  width:800px; / L) B# }( j# Q$ |" t
  padding:0; 5 n( ^3 q3 M! I8 S2 z9 j& s/ L' C  @
  border:1px solid #333;
' D' X! w7 ~* ~4 D+ a# g5 l  }
9 r9 @, D" Q. |7 g9 ~#pic img{
6 d# M  F' I6 n. J. B: [$ _) e    max-width:780px; 1 a# A0 ]+ Y- ]6 @
width:expression(document.body.clientWidth > 780? "780px": "auto" ); " h+ W) i8 p, Q7 v+ W
border:1px dashed #000;
0 Z( D5 d) O1 a, Z4 O} & q' j2 [/ x; d. M' p% U" B, Q
--> - }8 w7 b* k5 P9 m( c- C. P
</style> 4 e; a& N# U$ d' |' q. s
</head>
7 \2 [1 r$ _9 V) q9 Y<body> - A. @; z* A9 Z  v* ], x
<div id="pic"> % a' [+ c# S( h4 V" a" Y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" e# U0 W( T  W; ~</div> ) g* b% U: y/ C1 a: ]) W' L7 b
</body>
& }8 E( j) @3 r4 \! U/ D</html>
% I8 M0 v0 I9 O  a+ p6 B; N$ t  T- Y9 H- o% O% X
百分比适应:
3 C/ f/ R( y5 e以下是引用片段:" g9 i+ \, j& F- Z3 F8 t+ X! [. q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 f& j0 ]5 W8 r$ [( _6 w1 K4 Y<html xmlns="http://www.w3.org/1999/xhtml";> ) `8 `6 b% {. O) A) l5 }
<head>
9 n4 B, o8 B$ P<meta http-equiv="Content-Type" c />
- r1 |0 @/ m# r  B$ \: U( k<title>css2.0 VS ie</title> * _; a  q! w8 z/ {  B3 ~4 [
<style type="text/css">
+ J/ w" h6 o& h<!--
% j% H. |! N1 t3 |body { + G' F# {: C1 p( D- J* K
font-size: 12px;
: z& C8 x( U* N. b) h4 ttext-align: center;
; I4 Z! o+ E$ v- ]& Q( Emargin: 0px;
/ `7 h, X  k" J" N. h" qpadding: 0px; % k6 N% `) ]' O0 {+ X( i
} 1 [7 R6 q6 h. N* Q
#pic{ " a6 ?! J0 t/ q: }) V
  margin:0 auto;
" x4 M" I8 I8 h9 j5 c  width:800px; & h! d% w: Z6 k) [$ M. E2 d# h2 I* k
  padding:0; $ l% u2 b* ?4 _3 H5 e
  border:1px solid #333; * T+ N- @; p& f5 z
  } ; M8 y8 a2 w8 h& A  g, y: C' z5 w/ j
#pic img{ ; R7 r, c) j+ u- i+ Z
    max-width:780px; : `$ L; m) ?; F% {% z# g. @0 l9 Y& d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 8 ?2 L+ w. w9 M& V
border:1px dashed #000; $ H& I" C; Z2 {5 ?$ e) a5 B  f
} + ]5 x; y9 z) v% b3 _8 v
--> 3 F$ ^# x/ @% l! h3 c5 ^
</style> + Y  D$ M7 W; C
</head>
+ \' c( S. v) @# x' P, y6 a+ }<body>
: z6 P" [3 _* A# V) y: i; @<div id="pic"> , d8 q5 q- @7 a. s) l* ?
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 l' O; r9 E0 z8 m# K' j+ k1 H</div>
; n5 h6 }  n+ E# O3 I</body>
0 S! s( b$ c) o* K% O/ N0 H* _</html>




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