Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。( ?6 q: l8 p, E5 ]) B0 d- N
关键在于:max-width:780px;以及下面那行。, g. t+ y5 n) l3 w
固定像素适应:
  N) ^6 D# U9 X- y- \3 Y' v- V4 o# z1 G( S6 q4 W# {% Z
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 K0 [- p7 O0 H% X  v0 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 L5 G' w- l6 y<html xmlns="http://www.w3.org/1999/xhtml";>
, N# F6 F* S6 c: A6 O<head>
8 }" }0 }, l5 }$ Y! j- V; \<meta http-equiv="Content-Type" c />
3 e6 H/ U$ Y# T  \9 [' v<title>css2.0 VS ie</title> ) I0 h* }' r9 z: F6 v
<style type="text/css"> 2 j% _1 Q2 }( c/ n9 K
<!-- % C! T& J/ }$ A; B# S; k$ A# ?
body {
& ?$ E" M- X5 m- D( W6 O! L/ U6 kfont-size: 12px; 8 _/ Z$ e# W& m! |% m- b
text-align: center;
( T1 @- `8 W; n) F3 M7 P+ W+ w. e7 I  rmargin: 0px;
( h2 u$ C* g4 {6 Cpadding: 0px;
) M6 w- N  o7 c2 {8 g4 |}
. K# i3 p8 Q! _" ?#pic{
4 C# p) H- M& v0 ?, j  margin:0 auto;
; }: t' x. n; X$ A6 C: W  O" \  width:800px;
  F4 W8 I6 S& l" \4 j2 M, g! l  padding:0; 2 E0 u4 }8 n6 t2 }1 o6 m( o) {% w
  border:1px solid #333; $ G: _& g0 H& e4 |# J
  }
) Q3 T! H( A3 ?6 f/ B#pic img{ , @' Q" Y4 Q9 i5 `( l# k  e
    max-width:780px; ' [! ]9 [) V. a) k! T# ]6 ^3 w
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 B' G: w' i' Z* d; W2 c- M3 eborder:1px dashed #000; - M2 \- p0 l" x4 D6 O* p, ^- x% G
}
* O2 _% w  s4 o1 Q3 U3 {-->
) a! {) Q2 h) _</style>
0 l& x. [5 L1 V: z</head>
3 @, a, s5 ~) \6 z# _; X$ R- e! L<body> ( i6 S9 c  C! x( W, E7 {8 I8 k% `$ i
<div id="pic"> & q+ e3 _: M* [3 y, J
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 0 \) y# U" d2 x- R3 x
</div>
. [9 B, h1 ]- |3 W4 @</body>   C0 R+ r9 ~0 x1 N8 w0 d, l
</html> . `8 O' N3 w8 e# F: t( }4 j! t
9 c& R5 D' ?* d4 T# G
百分比适应:
# s8 Y4 U8 W' ^) j: y+ F以下是引用片段:! y* n0 O0 U7 T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : Q& Z5 w( B8 \# d( ]
<html xmlns="http://www.w3.org/1999/xhtml";> 4 w0 B, R3 S1 u& E7 ]. u
<head>
( Z3 q" \1 c/ H& o6 O3 N<meta http-equiv="Content-Type" c /> 3 T' B8 u, H+ k% b  V
<title>css2.0 VS ie</title> ) @) F! s" A& b. ^3 s
<style type="text/css">
- D5 k7 O4 _0 j7 i* d<!-- , D' X7 s0 U6 _- W- R# n
body {
" E3 ^& }8 A9 h; e. j& ~$ Qfont-size: 12px;
( s, J! H( s/ [0 f1 btext-align: center; % y7 k& Y! d1 f, g8 v; C
margin: 0px; 0 I4 [( E" P7 u; \  S- g6 j4 U* U$ m0 a
padding: 0px;
" g/ ^9 y" @4 [' C} $ ~9 q1 {4 V8 I, Y
#pic{
+ k! R$ }3 }# D$ L  margin:0 auto; 7 N1 H9 j% o) H$ l6 E5 F
  width:800px; % G+ M0 f4 S7 H3 }6 Z. R
  padding:0; : M5 `5 `7 v' t2 W) x2 b; N
  border:1px solid #333;
8 H( ^/ D- }( v6 V2 V3 Y5 g7 T" U  } 5 N# k+ j$ G% E+ g0 x4 b2 k  A9 J$ e. e
#pic img{
" \7 l( b' M' s4 N  B6 ^! [    max-width:780px; $ M0 S  f. C# ^- k; q% }1 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 2 W1 W) B; i. C  C
border:1px dashed #000;
3 ]* t0 t# A' ?1 s6 Y} 2 D) P) z3 k" e
--> " z' C  y# O3 f5 z* ?
</style>
2 m- w; ?8 z9 I; y: \" Y. i</head>
9 {) C2 z! \. V# T/ d/ o<body>
/ W! H' I- H4 F1 B<div id="pic">
4 t* S% x, _" X, ^0 ]& U# s<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! X9 {8 O+ O- Y* m( a</div> ' f4 j. l+ s* X4 e& q) b4 I
</body> 3 ]- K9 E3 L9 i9 {
</html>




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