Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。$ Y8 E+ p3 s8 m" @, ~7 _
关键在于:max-width:780px;以及下面那行。7 ^) l. l4 n& `9 A. u
固定像素适应:& Y, B. l0 E" i, K
: p  ]' |- w9 A! a
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>  以下是引用片段:3 |8 X' h4 ]9 X: R0 w; V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 t9 ^/ `% S& h; G% M" ^$ A
<html xmlns="http://www.w3.org/1999/xhtml";>
& }) G. }( k- @: P4 y<head>
+ g9 Z6 s1 u4 U. E2 _<meta http-equiv="Content-Type" c />
' H( U! L5 x- D: [5 N3 W8 T<title>css2.0 VS ie</title> ) i, V0 s9 A0 W  f( U5 a! s
<style type="text/css"> / G$ h' r; n8 l; b
<!-- 1 v# x4 \% u, p1 }
body {
  p9 x3 G' Q  y6 N* u+ D8 ^4 |font-size: 12px; ) E% ?& W0 U) J6 o9 J7 I7 Y
text-align: center; ( J/ C4 x& B4 D* ?# R4 \) c
margin: 0px; ) [2 Y$ G) j' R: A+ y; R
padding: 0px; & n9 X" ~8 ]0 e- k6 Y8 |
}
/ f& z' d8 o! P. W5 {#pic{
# l* d0 O7 ?& [$ g# F/ K  margin:0 auto;
4 ~/ ~, f) Q- z7 }& e  width:800px; 3 s" G' P+ E& }" m
  padding:0; " d8 o, q3 T- m! A% g" }8 r  [
  border:1px solid #333; 7 R% A: o4 F$ W! W( J$ I/ Y
  }
$ T( Z5 x1 J% i! q/ z8 Y, @#pic img{
6 I; n- f' C7 c" V5 H    max-width:780px; , K7 Z* x, Y. {5 p) N8 z) j
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ {2 E! j  x  {/ L, w; Gborder:1px dashed #000; 0 }6 r! P2 R3 P! Q4 X: l% a/ [
} 6 d) y$ [0 `4 U; U$ c' I
-->
; w2 O8 Z9 G( |8 E</style> 5 b4 p5 a( d7 P$ n% M9 x
</head> , C8 U5 h! M" t0 r! }' p
<body>
4 J& _1 t6 ?: u) Y1 X<div id="pic"> / {% V. B' N3 F, ^, i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 p" Y' M: Q4 J% R' U# U</div> . `9 Z* S4 Y. e: g
</body>
# ?2 O$ x" A/ Y+ C* Z) r</html> ! e) C: U/ M9 n% o+ a0 P

$ V. s2 ?2 L' D( t5 F( Y百分比适应:. {6 j3 ^% g; N  C; |  ?6 n- ]; K
以下是引用片段:
# T6 r1 W; m5 e7 w% E<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 z# l* C! e0 ?' H; o4 r<html xmlns="http://www.w3.org/1999/xhtml";> ( h" u4 J# M0 }
<head> 6 S1 W7 a) y, K$ ~
<meta http-equiv="Content-Type" c />
5 \1 A& b% A" [2 ]<title>css2.0 VS ie</title> & U+ D1 @* h3 m( }
<style type="text/css"> 6 I  ]& c6 c1 {
<!-- ; O) a2 z3 S; M, B) V" O
body {
7 g7 K; C) O# O3 F; u6 Bfont-size: 12px;
2 x/ e+ w( J& ]* e/ K9 K6 ltext-align: center; 4 y( P( j( k8 `4 q8 g8 I
margin: 0px; ( C, z# O0 K8 V6 i% \3 x9 @
padding: 0px;
- B) p' T2 g& L  c( j! H, i} 4 `2 S7 g% b5 M
#pic{ 0 m( C& k# U) v' Q
  margin:0 auto; $ f  F& {# N/ O. T- v  w
  width:800px;
) V+ r# U3 f' I4 g5 e2 J  padding:0; # ~) a8 o+ H  X6 O) H5 q
  border:1px solid #333; ) }$ Y9 B& K9 v+ r# Z" Q
  } ; _7 X3 A4 V6 A( c. q
#pic img{ 7 D7 E- q, z( d- u0 V+ S% ]: A# F
    max-width:780px; 2 V6 e: E% q, d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) F2 b$ ?" s3 b# m8 k: ]border:1px dashed #000;
& q% i  M  q4 z% Y; N} + l4 w; z% H* S. Q* s0 k0 W
--> : q8 t- O" C, q* Y
</style>
, g5 I( A( E) g( w' ?) `* Q</head>
( d, F. {- z" W# O6 i! O/ R<body>   k1 n/ U# G3 X5 o; `; M& R
<div id="pic"> # e5 k2 ]" _: R! R: H% u% i9 U! c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 X& u& ^; D9 Q/ Y+ y</div> ; i8 ^& {. O- J$ f) \) c
</body>
! D; O. d  S! r</html>




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