Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。9 i- [! y" B' |! c- w6 p% m
关键在于:max-width:780px;以及下面那行。
6 Z1 S* ?0 X# r. D8 l固定像素适应:$ x9 I- o0 c, Y- R

  u4 }$ {9 P1 v  k5 vdotted; 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>  以下是引用片段:
0 f: ?. r1 ^: v+ ^5 K& O1 W: l! e  [<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 G( b, S/ ?/ A" B<html xmlns="http://www.w3.org/1999/xhtml";>
7 M/ S1 |5 V8 P. m8 W<head> $ R7 v3 R6 a2 s9 T
<meta http-equiv="Content-Type" c /> & M0 o4 x& M4 {: P* L) Z4 V( x
<title>css2.0 VS ie</title>
/ R9 Q  l5 @/ y( C; Q. T4 G5 T<style type="text/css">
& Q, n" ?- j$ a( H, Q# n/ I<!--
. x$ _. `/ h+ A/ U# f  ybody { # z! |; E' V& f% A8 H' F) G
font-size: 12px; + T. c4 p9 @+ [1 l# s+ q
text-align: center;
' q7 U& _; F/ U; ]- ^margin: 0px;
7 y5 ^# Q7 [8 l5 Upadding: 0px;
1 a! |) o; T* ~} ) Z, F2 Z. J: d3 P; T
#pic{ + k& D( n) M$ W6 P5 x- I4 J7 j0 |
  margin:0 auto; 2 T& D7 e6 C, y. [; ]/ t
  width:800px; 5 X* j/ U4 X3 Q7 e6 e, S7 _4 h- M
  padding:0; 6 J  ]% |6 C: D# }
  border:1px solid #333; * i& T. d( ~8 [
  }
0 N5 Z5 F( W1 W; D8 y; X#pic img{
. W* _. Y3 U9 @" Q; Y    max-width:780px; # D! Y0 `0 J5 [" J* X% F% N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
# O2 a' G+ N5 D+ w) ]+ C9 Yborder:1px dashed #000; 3 C* `( X% h- h/ k1 z
} $ J  N  ~1 c8 ~, D; @- ?6 y% r2 W3 o
--> 8 _* u+ U7 z# x# l
</style> 1 k2 F2 N" K( ~- a- j9 e. b+ M
</head>
# [$ \# M+ y0 D. H<body> * [( B: b+ M. m
<div id="pic"> 8 J( N2 i. F( ?2 A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 b; X7 n1 }  o9 ]. Y/ x9 _' r; ]
</div>
/ h9 ~# m" Y) `! @  Z# m</body>
* l6 a) U  x# v! N- _; V6 y4 L</html>
$ E3 o$ x: x  s) F& ?6 Y* o3 F) h5 c, {8 u  o9 r) N
百分比适应:
  h* _2 y9 L, X  H以下是引用片段:8 y1 e" W/ a! l* m4 K" L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / \" r6 C  {2 a
<html xmlns="http://www.w3.org/1999/xhtml";> 1 ]. C4 k2 a/ y* i5 v1 ^
<head> 7 g# b! I. g4 j* ~
<meta http-equiv="Content-Type" c />
2 {9 m2 O" I6 O" `<title>css2.0 VS ie</title>
, u& {& ?( D* O  ]0 Q3 \<style type="text/css"> & w# C0 \8 ^7 G7 \1 t4 m
<!-- 5 j5 N6 l) F. X" J. M
body { : G7 Y' _* s' O. n, a
font-size: 12px; 4 e- v6 h$ H* a  d% U
text-align: center; ) Z4 t1 @2 Z4 q& H. ~" T$ A
margin: 0px; 6 ?- P# x( h* }& p) v. z
padding: 0px;
: L& d6 w. M% w. t3 H8 W} 1 R7 Q) t" l5 s6 B+ F
#pic{ : }- ?, |: ]. z7 [$ W
  margin:0 auto; 5 A8 O# {+ f0 S3 C( {
  width:800px;
' }1 y& E$ f9 l) _" D- Y' \  padding:0; ! l' b* H8 W0 p1 S; X  p6 J
  border:1px solid #333; " q& E- C; U( ?$ Y$ v
  }
. `+ I' y+ L$ g: i% e1 T#pic img{
( }3 R; _9 ?. ~    max-width:780px; - u1 n! V) L4 V% ^- z; {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # v% y" I7 a' ~; p4 Z" G) M* E6 N: ^
border:1px dashed #000; 1 i" H2 Q- D- [+ o% w4 W
}
* u( _$ w( I7 b8 B8 |/ C-->
7 t5 Y3 C6 k5 m. U</style> $ z+ a* \1 J0 i$ X& ?0 b  `
</head> 8 P9 }0 a; m; N7 y1 s
<body> 1 o  d1 \! N2 s# P7 C( ]5 L$ X
<div id="pic">
9 P. p% A7 f6 h1 [! j0 R9 P0 _<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 E: v* X- H- T. X+ L</div> 1 S  a+ G! Y+ y% n9 f
</body>
1 Q. W" Y& e9 o5 I2 u# v</html>




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