Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 f# v5 F. O' V' a/ O5 u" ?关键在于:max-width:780px;以及下面那行。
5 _% ~# f1 t; `: X固定像素适应:
  S% ?' \% ~) b3 [, n1 o; x
6 }/ p9 B1 |, G8 }6 ~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 x0 i" c" H, g/ D" ^4 j! Z9 r/ j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 F1 _2 Z# s2 M6 \
<html xmlns="http://www.w3.org/1999/xhtml";> + D+ t. }" d$ r' c" x( J
<head> ( H! c) Q. t& A! u" C# w
<meta http-equiv="Content-Type" c /> 2 t% H7 m8 P- K. H
<title>css2.0 VS ie</title> 8 U$ V5 n, y7 y4 s# j- a
<style type="text/css">
- \( m0 h1 U- [0 U<!-- 1 {( D, D4 \: v6 E; S
body { # q) D0 q0 y: d/ u, X1 Q# U
font-size: 12px;
) p0 b1 ?' t- vtext-align: center;
; W/ f7 |7 N2 c. Y+ e( \margin: 0px; . t  I% b5 L0 f7 f! C% ^6 C
padding: 0px; 2 Z# D/ Y8 o/ ^/ P+ _5 l
} 9 I- G. b- t( j7 |/ s
#pic{
9 K9 e4 I2 h, E4 r/ f8 e2 \1 Y. _  margin:0 auto; . J2 {" L8 Q" A/ W; R% e
  width:800px;
3 j. d% q/ |" S. g/ c9 i3 k' C* \  padding:0; 7 @9 e7 ^1 _9 o; w
  border:1px solid #333;
; l; c- k. p, J' b  I! F; y  }
# F; n5 }+ D/ e& P; |: P#pic img{ / `; h. \8 N! Z1 d
    max-width:780px;
; X7 c; Z6 O8 D1 h8 I9 X, c& Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" );   X" U! k5 ?5 o" O( X( C
border:1px dashed #000; , d7 V0 ]' O( r) E5 d- I
} 1 X* G% K" K" i; e
--> 6 S; A$ ^" ]! v' G* ~/ N8 m
</style> " _5 _) _( b' Y4 ^4 N
</head>
0 E: `& n) ]+ O, b. V<body> " }4 B% U! q( T2 a# V0 t" n! V
<div id="pic"> ! P$ D! i  l3 ^
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 [" ]$ Q  N7 x. ?8 c) ]</div>
7 j$ X6 i9 N5 X5 Q! q/ Q) T7 Z4 l</body>
2 Z$ H# u! p9 X  N3 \</html> " u( _9 p+ ~3 x; Z; ]

& z2 t5 I* b  Z百分比适应:; ?0 O. O3 q0 V9 y
以下是引用片段:. R; h* r( w4 ]; B, ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ( I" R4 H+ |; L4 I+ ~3 J2 `
<html xmlns="http://www.w3.org/1999/xhtml";> 0 ?0 n  n1 }/ a+ F0 f8 u7 z
<head>
" a: t5 e  T* @: B- I( R1 E9 k# H<meta http-equiv="Content-Type" c />
) C, M3 N" ~: [) x6 M! @) Q<title>css2.0 VS ie</title>
. B0 ^0 h9 }2 C9 L<style type="text/css"> & W$ {0 y/ K6 G6 q4 x  Q% T
<!--
; C! I3 }% }$ E. E. c. Xbody {
& F, W; u# b1 h) Yfont-size: 12px; 9 w- t* r  s/ I* ]: t8 B' t
text-align: center;
3 f* `# Z: z( t" b6 d# kmargin: 0px;
8 R" j1 N; e' d+ F+ fpadding: 0px; + T/ ]+ W5 _; y
}
) }7 I' \; B6 f5 n2 R#pic{
$ R2 i1 ^2 L3 r5 ^6 [7 U  margin:0 auto;
4 Y# V6 s- {" n8 b) x/ |. Y; o  width:800px;
. {- d" i* G& O+ Y  padding:0;
& K% d3 m2 P6 K1 _0 B  border:1px solid #333;
  y3 b6 f$ {# _$ l1 N  }
# E1 [8 n4 q" S* T#pic img{
5 X3 ?- |$ D4 j1 @) V    max-width:780px; 0 m6 L* c. R7 k. a1 @3 O
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ ]' F8 Q: l7 K" {/ q) e1 ~- Uborder:1px dashed #000; / p- d* c! S5 q# V
}
+ R* r% {, w9 _+ E/ c; I--> : e; h0 @/ c/ s( z; K
</style> + O7 b8 ]1 J4 @# g
</head>
8 R! x1 p& D0 }) U9 i: G! Z6 S<body> / k' M- V" s" `( J/ Q2 \- Y3 q
<div id="pic"> 0 w1 [  I+ f( I# V+ U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ; q0 b2 M* m0 E/ V" G) F% x6 I
</div> ! c8 `- `* G: D; S' t! q5 `
</body>
7 g( u. s0 C- U) s/ U$ X</html>




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