Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: I0 w& Z2 _) [2 U/ X
关键在于:max-width:780px;以及下面那行。0 b; Q+ R: J6 D9 C
固定像素适应:/ k6 s. M: N$ x1 a6 K2 l: K

9 p* h: ^* {! _: r; Wdotted; 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>  以下是引用片段:1 J; M' Z8 t, Y) X& I$ ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> % P# k0 y$ c7 }& L# h% L
<html xmlns="http://www.w3.org/1999/xhtml";>
5 p7 g7 \" n% s0 R$ {<head> 3 }+ y( I: S- n
<meta http-equiv="Content-Type" c /> ) H( r! g. k$ Z
<title>css2.0 VS ie</title>
  k( z# @" n2 n. N6 D% i% T4 L6 A<style type="text/css">
" S* V0 K; a' m( K! P" }& T<!--
( a* u: Y' C  O5 Z. \body {
9 ~' G7 Z- y9 D8 Ffont-size: 12px;
: ]8 o6 W8 I. @. c2 P  j! _7 Gtext-align: center;
! q: G% i2 b1 i8 rmargin: 0px; $ X. `; A3 v( J7 T' x; X( Z" V
padding: 0px; 8 T# s9 |! U$ A, x( \: e
}
' O! q9 G4 n* B, R9 f' L& f0 E#pic{ / y* U& A+ X' l9 T
  margin:0 auto; 7 e7 i; S. Y9 Y: ~7 M' T
  width:800px; ) y# @, }1 f0 C9 i, F
  padding:0;
# Z+ ?. i/ V6 I  border:1px solid #333;
4 M, j  G+ m) ~2 ~2 S% ]& R9 ~7 J  } ! @0 l# }  L; C0 |2 `/ ?3 D
#pic img{ & L. f1 k% _3 `: N3 p% Z/ A
    max-width:780px; * ^) e! Q5 \5 p% W' k3 j  `8 \
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ Q& Y8 k8 g. |$ i: N; [border:1px dashed #000; 6 e; B) i$ Q+ s+ P' F9 x; D+ t5 A+ _
}
7 U8 U6 u. E: c: M9 D5 U-->
  Q6 h! Q' V$ @</style>
" o# y+ v) p- `0 R6 Y</head> 7 F" J& ?2 ^+ J$ V1 }
<body> 9 B* H% S* c0 i
<div id="pic"> " r0 N) G" h) _1 K) t# {
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 z' {$ V7 }& Q9 K" \9 h7 h
</div> + ~  ]  w( p. J. r2 j
</body> ; K: U: Z7 q# g9 x& H' R
</html>
2 f! ]) g5 G! K9 ?4 P
7 L1 S8 o/ ]% F) U7 m3 F7 Y% a+ \- Z百分比适应:
) T$ u+ V% e  C8 R; P以下是引用片段:
# n' R9 _5 q& q( G# q; f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ u; W3 t! C8 W$ B" T
<html xmlns="http://www.w3.org/1999/xhtml";>
9 h& E  I; u/ I. Y* S3 _; C<head> / Y1 l$ t2 u1 Z5 w, Z1 e1 M
<meta http-equiv="Content-Type" c />
/ F+ _, b  l1 A* e8 z0 q+ f: P0 P<title>css2.0 VS ie</title>
. r7 e0 S( E! |$ x$ S( O5 d<style type="text/css"> % ^2 [) R! p* J3 h- n
<!-- 5 R1 h& \6 u* ^; k" Q9 y; g4 Z
body { 5 k5 G! \1 g: I: K3 j% c
font-size: 12px; 5 a3 Q$ I3 ^. [/ Y9 ]& _2 e
text-align: center;
1 p( s4 J* y- ^margin: 0px;
) ~1 s) ~7 }! ]( }+ S* Ppadding: 0px;
' V( Z; t- x- z3 Y} 8 f2 Q7 Z- h& c3 ]
#pic{ % w$ r) ~0 Y( }% N
  margin:0 auto;
6 t3 l5 h% I/ G$ w  width:800px;
7 I! e3 M! _9 t# X# ]7 n) k; ~) |  padding:0;
  e+ S% }; p3 h2 Y( @  border:1px solid #333; , _0 F8 Q/ b" B2 y5 X6 b5 i# ]
  } ' S- ~" Z% N4 O3 N; K
#pic img{
% d1 R) s, }4 Z; U6 M/ D8 [    max-width:780px; 8 K8 {: S6 S$ G- O: F; \! C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 F" [# u6 W( [! ^! t" Dborder:1px dashed #000; 5 x- @& E. L' z& c6 S, b
}
0 X' Z+ a  }- U  y--> ! Q5 q2 z& M+ o, G/ m1 M
</style> $ D0 W- q6 a8 h; N* ]1 l! r9 c
</head>
0 C' e6 H9 J% {( c<body>
' h! |  L' H6 k3 l0 d<div id="pic">
4 i; v- _7 g' ]) _' V) l<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 w7 A8 u. n/ b2 u6 O3 K+ X
</div> 0 {2 N* i0 ]! G- z
</body>
$ w( I! K: P2 e- g. l3 ]) H</html>




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