Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! n1 j! F' o; A( `关键在于:max-width:780px;以及下面那行。8 f* \1 {% I4 A) \1 @6 k, C
固定像素适应:3 T! A0 {* l5 v. a
, A% V; |& z0 k% k
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>  以下是引用片段:: k5 }  Y- _2 i# a. k0 Z' T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 R+ X* I% p, U2 m
<html xmlns="http://www.w3.org/1999/xhtml";> ; q1 G2 R0 x  H3 t, ^/ V; w+ b1 W
<head> 3 F9 ?1 z% c' h# l
<meta http-equiv="Content-Type" c /> 1 ^0 K! Y6 y  K& L9 b
<title>css2.0 VS ie</title> ( N. l4 h! \% l( H
<style type="text/css">
3 m6 p6 n1 X7 H4 I0 O% |2 i1 m<!--
5 D# J& P" k! m% p  ibody { 0 T0 @6 k0 M0 x9 r- F  W
font-size: 12px; : j( L5 r% C& V" J) T
text-align: center;
8 g- I4 l/ x/ q& g2 @margin: 0px; 6 B" p* j1 c# v* p# C2 v8 u9 Z8 E
padding: 0px;
) `5 M. \/ g; R9 B* r5 @0 l}
  Y& ^- X0 f2 h. b# g#pic{
2 b9 G" {7 u: Q7 I& U) v/ G8 U  margin:0 auto; 8 |3 C( C& N. i) S
  width:800px;
, ^2 C1 J$ m$ w5 @% z  padding:0; 8 E: |3 P. c3 d+ z
  border:1px solid #333;
$ `& Z0 w0 o+ f) w( @" n% W: B$ o  } 8 K! P" o' k7 T' J' Z; O( P( O
#pic img{ 0 l5 Y) K/ y6 p2 l/ S$ V
    max-width:780px; 6 s1 }6 v; _, b% A6 u) F
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 O5 n/ I. T# m: V$ a" B. @border:1px dashed #000;
/ ~! y5 ]0 f" o6 C1 U3 B8 r} + D6 a9 N; W) I; K/ i( K: B% z' q; b
--> - c8 d+ t* }( V8 k/ J
</style> % \/ c- S3 ^# X, c
</head> % g) U! [# L8 k" Q) `8 t2 S
<body> 4 u. J& V9 [  M& {: X
<div id="pic"> ; Z) ]6 f2 ~5 W$ |0 V( h
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& ^8 d* I6 m- h" j" C7 k</div> 9 T! y3 e" D4 I) I, ^$ V/ B- x4 |1 D
</body>
( n) ^( D1 M# e) Q</html> + T  \4 u1 E2 q" G; f& s

4 w5 h# S2 G' P- r百分比适应:
: Q+ D, X0 N( {6 \以下是引用片段:
9 o( a# ?$ k+ V* I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 N  S7 z( B' o# t  W& X<html xmlns="http://www.w3.org/1999/xhtml";> ( f6 F# s8 p; Z) n
<head> 7 J$ e  j4 ^. f4 T
<meta http-equiv="Content-Type" c /> : ~+ s3 }/ Q# k
<title>css2.0 VS ie</title>
* k' ^: q6 ]) X- ?<style type="text/css"> 5 u- C# {1 L' T! W, R5 q) ?
<!--
1 V6 N4 t) `: v# Gbody {
, c  c7 }+ m% A# nfont-size: 12px; : _# _7 }6 t  K$ `  I" E# q
text-align: center; * E, x, Q/ f3 n  U* V3 \
margin: 0px; ) v2 e" a9 @: Q) I
padding: 0px; / m( H1 u1 A7 ]" }: i: C8 H; O
} . [$ z) w" j! E# H2 p
#pic{ : j* {. I/ p9 m$ z& v7 u
  margin:0 auto; " O  Q% H+ \& U$ o$ r
  width:800px; - g' n0 r1 d8 y! g( L: ^
  padding:0;
. y% u# N! q2 V4 x) P. l/ a  border:1px solid #333; : z$ v7 L. V4 ^' d: F' f
  }
8 C. G  d- o( |2 \% i! ~#pic img{ 5 e: M% a/ P* d, o
    max-width:780px;
9 v6 V/ x3 _1 q1 U6 l' mwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & B1 ?/ s7 J) O
border:1px dashed #000; & v2 t7 w& K- t
}
0 R9 C; k0 E  N-->
0 J& F' Y" [& t7 E* x5 f</style>
2 B  Y: S9 ]' q, b$ W, [</head> 9 P) e) i: M! p  O* h1 X( O
<body>
* L& u* Q' q: y% X. i" S<div id="pic"> # @) q, ]% }0 V2 f2 G
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 }, B# q4 q* X# e2 z4 s4 L
</div>
7 l. J  g3 P4 j& Q6 W. X) u7 P! w</body> & r5 K# ^) s5 t* b3 e& G& ~# H
</html>




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