Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* b9 J' f$ c* x0 Q2 Q关键在于:max-width:780px;以及下面那行。. V3 r. j7 f* f  c' x4 L$ U
固定像素适应:2 g2 j1 \9 `. E
$ S! \; g+ q! Q
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>  以下是引用片段:
2 ?, L% \, P7 c: g3 H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! Z1 g8 r. s6 c" ]. V/ z<html xmlns="http://www.w3.org/1999/xhtml";> 4 u- {9 P+ M$ j! P6 g; q" I" j
<head>
9 T! u1 E  d) g; X; J; \8 y' a<meta http-equiv="Content-Type" c /> 1 p/ U5 E- {& I$ }. I# r
<title>css2.0 VS ie</title>
4 W; t( P0 C) W/ X. M: H8 U6 O<style type="text/css">
$ \7 [: f# A! v3 s/ T<!--
, W; G- v- r& D& ^3 W; ~body {
' i: S) V. Y) vfont-size: 12px;   H+ d$ K" j& R9 }
text-align: center; " }. k0 d0 l. p, J' d( ]
margin: 0px;
" T9 ~9 \) G- y* W3 b2 g# Fpadding: 0px;
  j0 L4 o: v- I: n6 a8 j}
3 S" x. ~( j/ Y2 m8 f#pic{
( z" T2 x( ^4 [4 L7 Z( K  margin:0 auto;
. C6 Z. a& }' J; V& J  width:800px; 6 `- t, w  L7 ?6 ]4 ~7 l
  padding:0; ' l* g, F- ^, T8 Q
  border:1px solid #333;
: K8 ~0 a' ^7 ^, p, B  }
5 \- D3 u  u* c. C#pic img{
1 C7 p) K+ J, @( D% C) K5 l  t" ?* m    max-width:780px; ) f: y# h$ X9 _9 z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 N" V: D3 F6 F* g: f0 Oborder:1px dashed #000;
. O. U9 R  W1 V) r7 J: H} 5 P' e! u- B3 W
--> " A6 r3 v' f6 t+ S6 {% o
</style> ! }: B8 M; x- k6 a/ n& @; Q4 x
</head>
' Z7 Y8 t1 W9 m3 \<body> % r2 r* h" k3 o; J6 S+ E
<div id="pic"> 6 e* F! E  V  W- O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! {9 O; h, z+ ?
</div>
# f8 K6 h0 k( B" m3 z" w. f( U8 M</body> * P3 ]* ~  q( v3 d$ T  _/ d
</html>
- Z( U# C. g/ H; f1 i0 q2 [8 `: T9 h( p0 b
百分比适应:
* l1 H& [4 M" Y" S+ T* r! }以下是引用片段:1 I0 H; ~+ E5 x* s* E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 U$ A  L& i. V) _0 n" T' ?
<html xmlns="http://www.w3.org/1999/xhtml";>
4 p7 J4 t7 X' W<head>
5 p  o# M5 Q& l" m0 X- H. k<meta http-equiv="Content-Type" c /> ! P( u, {- ~6 g' l: m$ w
<title>css2.0 VS ie</title> + D8 W7 @1 m; y  R: J5 b# ?
<style type="text/css">
. T! c) w: F& m- e6 r<!-- , r7 F% {4 q5 L4 x9 f8 H( e8 v0 z
body { ) `+ ?& t2 b8 W, y) k0 w
font-size: 12px;
' u8 S, T4 j5 t( f- E0 j: ctext-align: center; 1 C& m% V; y/ \. |
margin: 0px;
9 Q5 A$ M4 F4 @! C- G: m! b* ^padding: 0px;
" o$ c/ \! S4 u; z) Q6 v}
0 h! ~$ g+ K' b" n) G% n#pic{
. ]( U2 m* t2 _  margin:0 auto; 0 p6 t+ r7 m: i. \: K- K" p6 F
  width:800px;
3 Y, v4 K" i5 k8 K  padding:0;
* y, T" X9 Z1 F6 j( W5 W  X  border:1px solid #333;
7 Q. _6 _" p3 i  [( Z' t  }
9 D( V8 x% N! @+ i) t" c8 Z' |#pic img{ 1 S9 U; E( l" U, t6 w% T2 L; X
    max-width:780px;
, X! m) B" e' k$ s9 u) V. Swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); * }7 N* p. l$ w1 F2 m7 g# `' g
border:1px dashed #000; " D+ ]7 [- i8 R+ F' T% [& Q0 D7 L
}
- A; ~+ q$ t. a-->
0 T$ ]) }  H& b) Y</style> 4 C5 i+ f9 Q6 D' m  [0 G
</head> 1 r% g% ]; O0 S
<body>
) M. k8 {* h" J: ^( [- d" C5 a- }& r% E<div id="pic">
7 l& v& a2 [1 x8 C2 Y% R" k<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 O9 v  l0 Y$ P$ C</div> " j" l9 ], ^5 t' ^
</body>
) Y) f: z: a* W% e* r  a3 V</html>




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