Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 ~4 W# g8 n* p8 q关键在于:max-width:780px;以及下面那行。5 R* {6 Q( D( w0 t1 z
固定像素适应:
1 U$ n8 o: f. s$ J8 P9 v7 d% c7 l4 n
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>  以下是引用片段:* @0 ?5 ^) I/ D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! k' ~' X; y+ m2 y<html xmlns="http://www.w3.org/1999/xhtml";>
, G* v$ O* I+ a$ Z5 |8 H" s1 T/ W<head> ; U% X0 a; j; m) |6 F
<meta http-equiv="Content-Type" c />
9 C/ {; c) R2 R$ \7 L5 @# |<title>css2.0 VS ie</title>
' Z, S5 s. `7 [. n+ s9 k- Q6 n8 v/ i<style type="text/css">
9 H/ m5 m/ M# ^( I1 l, i& W7 Q<!--
9 h  U& |$ |/ D1 j9 E1 X! Sbody { 3 w# i; S* o- U8 Y
font-size: 12px; 3 P- d) g: z2 }
text-align: center;
$ I" h1 x  }* Z, R+ y. Umargin: 0px;
4 _8 G6 S; i8 j, `* [padding: 0px;
/ ~% l* V; j# S6 g+ M; C$ ]}
5 |' `7 |+ [1 k4 r8 j& @#pic{   G8 p7 E3 A7 J9 L) K1 x. h4 @! w8 o3 }
  margin:0 auto; 2 T$ K+ Y4 ^% L6 ?! P5 X! \; h
  width:800px;
8 H% Q& ?( n7 m& G- w2 f  padding:0;
1 a9 |' o0 W8 J5 p3 p7 A$ t  border:1px solid #333; 6 w/ \$ _( Y, Q& F6 z" d
  }
0 Z1 b4 a! H. C" C; y1 f#pic img{ , e3 b: |4 z; k' J
    max-width:780px; ; E2 P' G& D& ^! ]' |$ n7 s( p0 i4 L
width:expression(document.body.clientWidth > 780? "780px": "auto" ); + u0 |% E8 c& Y/ C8 y; A) Z$ a
border:1px dashed #000;
- B. j! e8 N- H; a# _7 L0 S5 |} % q3 z* B8 Q6 _. \$ S
-->
4 ?9 ~" g' q, i9 w+ ?9 {</style>
/ j* G5 i! o( j+ _8 R/ M: ]& K</head>
: L- v5 t$ A* A" y; o  W<body> . t$ K6 q4 `1 ]& o2 S
<div id="pic">
- _8 J5 I! c$ a* ]# m$ G1 z: E<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 n) Z5 r  Y' K8 y2 F# D2 `2 g</div> 8 s' K' T: t3 L8 h8 G
</body> ; J( ]5 D9 D' }, Q) L7 P' l! c
</html>
6 l" B5 A  ~2 c" ~
0 e* e  S1 m5 v百分比适应:2 C. D$ u3 T& w( {
以下是引用片段:
7 k/ d: p' j/ L6 o( z<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " c5 O" }# x" i5 W7 s3 D& ~5 ?3 b
<html xmlns="http://www.w3.org/1999/xhtml";>
" t" u; V# G3 ?: X<head> , S( k, w7 e, w
<meta http-equiv="Content-Type" c />
! j( c8 {6 C0 O<title>css2.0 VS ie</title> ( l: y' g2 W3 M( _5 W4 [
<style type="text/css"> & P) f, L2 G  \* l3 X
<!-- 7 p' ?; ]  d& |  W
body { 4 x0 I) a: `4 C/ [  I0 b0 p& `
font-size: 12px;
) V% ^1 D: t- X6 itext-align: center;
6 D+ o# b7 \6 q( w% k" qmargin: 0px; . m+ a1 {+ P4 U% j  h1 ~- N: X/ G
padding: 0px; " H2 W0 u" k! v) k' l
}
7 J- r( c# X. I' H5 o2 W#pic{ 2 G( }, s7 T6 P, P- R  e5 N
  margin:0 auto;
3 r% j/ h' ^8 c/ B, ^% l  K$ E) c  width:800px;
0 o; J0 r% R) v3 [  padding:0; - e9 {; k0 B5 m0 n1 o
  border:1px solid #333; 2 ], S; p/ w& v- r# z
  }
4 W) B' @, ]# V+ Z' p% {! v#pic img{ : S! {8 O0 h$ G+ p/ a) l; B, o; C
    max-width:780px; # ]* ^! }5 [# L! H: y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# O, v& v) a$ Z/ V! f* Gborder:1px dashed #000;
0 Q6 q4 I# N* c+ P6 L6 }3 a}
' E2 @& M5 q2 S8 P' I: f--> 4 N4 f' w1 t, y+ j6 |- W7 L# @# E
</style>
% h5 z: q  u2 C- M</head>
3 p0 e' e, A+ l( |+ H<body>
+ D  y6 L* ~1 U6 O4 r# w<div id="pic"> 3 D( H6 `% r1 o4 S4 N9 {, t
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 \6 H0 f( ~$ ]0 s</div> ' c* q, o9 r) n, A0 D5 e3 x6 t
</body>
0 j9 F- j6 `- F' c% e</html>




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