Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。- U& }7 _0 }3 j: G- ~& Z3 L
关键在于:max-width:780px;以及下面那行。; i5 {+ Q( d+ g% t: ]5 ]/ Q
固定像素适应:
8 G) b8 w, |; g1 ~% V6 L3 ?  }2 g  }2 R% i
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>  以下是引用片段:" {" L8 V- H) B2 N" Y9 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 W" Z; b* h* @<html xmlns="http://www.w3.org/1999/xhtml";>
( u0 f# g. \5 W0 ]2 ~! L<head>
) c4 L9 P0 `+ ]# U/ f<meta http-equiv="Content-Type" c /> , T8 R6 l% @1 s1 \2 |
<title>css2.0 VS ie</title>
* P1 y9 u1 l! w7 o<style type="text/css"> $ q' e* ?6 e! K- I9 E
<!--   A( ?; A. S# Q# U5 x; t
body { $ X4 `3 I& v$ l2 q  O- S
font-size: 12px; 5 v6 Q, H' ~4 T* A- L
text-align: center; : L; g2 p" p5 U" `# S
margin: 0px;
# ~. e! J) ^5 q; B* Lpadding: 0px; ! I3 \0 K& f+ j" s; h$ b. P1 |! b
}
5 \# d6 {% `' H#pic{ ) t& N  N% X- p  r# A; G4 d9 U: j- b
  margin:0 auto;
1 _$ s& I# N( o0 }) Y  width:800px;
0 V) L, S) L5 u+ X+ x1 `  padding:0;
/ f6 O6 Q+ c5 v2 G9 [  border:1px solid #333;
0 N1 n$ |  `% i! y) j  n* W$ G  } 8 s' @5 V5 e: o7 |& I! M' P3 h
#pic img{
0 A6 @! g) f' d% c0 r. B7 s    max-width:780px; . ]  p! ?7 o5 z0 W9 Q. f5 {
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ; j% u8 P/ l+ @) B) V% P% Y
border:1px dashed #000; 5 r% F7 N0 Y% h7 L) @6 j
} . s. U& o/ Z& I  Q' v
--> $ O3 c0 z$ C1 l0 H) G
</style>
( _& r/ F2 I6 P7 h2 t$ g</head> , r* \* z2 ~2 j3 @/ d
<body>
1 g+ C" n$ V/ F" q5 B4 @<div id="pic">
7 @6 M, y. ^4 T3 G1 s5 P: y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 h; o7 }0 }; n/ r$ r$ M</div> ) G3 z9 z5 O# s# r) X8 v7 J
</body>
7 n! A: m0 k2 j# f; G3 h</html>
( t' I9 `2 S  m& ~0 N: j; d# M& Q( k
百分比适应:" {  a: G' O) v, m/ ]/ ?
以下是引用片段:
' h  p2 x  q" s4 y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ _/ ]. q: f7 T0 I2 Q: \( q<html xmlns="http://www.w3.org/1999/xhtml";>
% i4 x1 t6 ~+ ~2 R; y" i' C  Z' [5 N<head> 4 S1 D& Y- L+ W& P% t+ s
<meta http-equiv="Content-Type" c /> 2 |* h4 f+ o& {3 E7 V9 o
<title>css2.0 VS ie</title> ! C  h8 H) T! d# z' [/ c2 ~1 ~4 v2 J
<style type="text/css"> ; i( e' j9 r3 n) L( w$ o* L
<!-- 6 l" P  ?5 e, X& E" C- H
body { 5 H, D( y( `8 n2 }
font-size: 12px; 4 [* O9 f* z4 n7 \: l5 M& U
text-align: center; & v+ I$ ^0 d. p  L! D' J1 x0 E
margin: 0px;
/ x- y( r2 j% r8 D% [! e7 Xpadding: 0px;
; Y$ }. Y3 y3 N}
  E) L0 B) D8 m. ~6 d) f#pic{ 7 c2 Y; r5 Y& A3 z# p
  margin:0 auto;
' E+ U! N; m. `  ^; I( x' T  width:800px;
4 k: T! R# ]9 @) h/ e8 {: j  padding:0;
9 u7 _/ t; r/ J* s7 Q$ n6 ]  border:1px solid #333; " E; l2 \+ ?4 \! N) ~% n# J2 g
  } 7 r+ ~: M2 y; \* q9 B- F
#pic img{
# [0 v& o  Q. O- }. R4 b    max-width:780px; 4 }% K* ~# t. g1 h, N4 e
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ! Z  l* @/ n+ G9 ]5 b  ~/ k
border:1px dashed #000;
5 y  i6 @4 N0 I, H. k) ]}
6 L. ^7 a' I* g2 J* ~--> : ?  E3 _$ F6 g
</style> 5 B" Z  p( I) c: W; r- N# t5 K
</head> : y9 b7 o: U8 Y8 h$ u
<body> . f  |" `( e) G; q/ H7 I4 I# I
<div id="pic">
6 h! s+ f2 J0 X/ p. ^8 t1 B; }) K; J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>   \' b7 T' Q0 G1 v
</div> 9 ^5 I, `; P8 j' w
</body> 9 D( `0 }" F- p- M- v) [) ~
</html>




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