Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。& n$ q  Q) g) v- A3 y
关键在于:max-width:780px;以及下面那行。
9 d* k  ~8 f. S1 I/ S固定像素适应:
& \0 q7 @) u& I: `7 A( N9 @
- ~8 S0 i; {$ v% A+ Qdotted; 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>  以下是引用片段:+ W7 K# t# T/ C: G$ f" t% p2 {" W3 a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # u" @2 _: Y7 W8 K- T& a. b" b
<html xmlns="http://www.w3.org/1999/xhtml";>
0 f1 T: T& m( w+ ^7 h) F6 U<head>
* W* B& h% |; o7 k( n+ A9 {<meta http-equiv="Content-Type" c /> % W! n# O( A+ D$ q' L2 C
<title>css2.0 VS ie</title>
; }$ ]( o- o) k8 _<style type="text/css"> 8 g! L. p+ ]( H& e/ f
<!-- & [# F/ `( H. F
body {
+ P8 L+ |" Y9 q, Z) Ffont-size: 12px; 5 F  W+ L7 T8 k, t
text-align: center; 9 `  v, Z7 {% z. d! q- I
margin: 0px;   \+ q( C) j3 \9 F! D+ h
padding: 0px; * l2 r5 n6 F' P
} & e3 ~) Q2 {1 r
#pic{
1 G, S& w0 r7 }2 V* Y+ K  margin:0 auto; & E# F7 }  M+ g4 W% Y7 Q4 ?' l1 w
  width:800px; $ h; G6 X* [7 d' |& m4 \1 r3 E
  padding:0; 7 f# w) G! ^) F* v: y7 c, B
  border:1px solid #333;
4 ~2 ~1 a" e. m; T; B  } + w# W. U/ C7 ?% e$ v- Y
#pic img{
# ?& }5 ~" h5 d0 A4 X    max-width:780px; 2 m3 _% m6 S4 N- x
width:expression(document.body.clientWidth > 780? "780px": "auto" ); " K# J) g2 K( @9 v. W# w- x8 R
border:1px dashed #000;
5 y* M( j# p+ W% X$ \}
! @3 r/ [$ |1 @  k% Y7 n* E--> $ L0 J3 v# e2 _% ^  K8 G1 o
</style>
, [9 g4 w6 l' k% C: d</head>
( }; Z  y6 K4 S# `9 E. m<body>
4 z1 z. C# p5 s& ?# B<div id="pic"> 4 _" E3 C+ N+ _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! h( _1 q" J$ l7 Y% u( V$ X</div> ; I" s( I3 I6 T+ O1 p! O& h; e
</body> ( R9 K2 c0 P( x3 h( c- \, p) n, {
</html>
, s- ~1 _; J2 |
! X8 J3 [: o' h' U' q百分比适应:7 u* d4 n) ^) @
以下是引用片段:
/ @$ T! }) P& s; O2 ?, Y<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 r: r3 [7 D% m3 ?
<html xmlns="http://www.w3.org/1999/xhtml";>
! B( |5 I3 U/ S<head>
; T) r  ~7 n2 H9 R2 D- ]% w<meta http-equiv="Content-Type" c />
1 q) g5 z% B+ y& _<title>css2.0 VS ie</title>
" z+ B. i" k) h) O<style type="text/css"> 2 J  L; P" u% b6 X! E
<!-- + ?% E# @) K, P8 x& y6 K0 K+ Y
body {
5 B7 Y. a, f5 M) }/ rfont-size: 12px;
; w1 @! d& z- xtext-align: center;
1 F: A. ]" _, C' X- w5 p, Gmargin: 0px; 6 z( h4 Q5 c* g7 ^5 V  E6 W& X
padding: 0px;
$ C" T3 E2 D! y' b}
/ r' T/ G, g4 {#pic{
" B( u' H' y3 E  margin:0 auto;
/ l( p$ u; `) a  width:800px; " U! e4 Y. H% }( ~: y
  padding:0; # E- f& l2 n" ?' }* k# V- C
  border:1px solid #333;
( B1 {/ B+ [: Y  }
' U- H! _2 F9 A* H6 V* n3 \#pic img{   k- C0 S- b4 \9 P
    max-width:780px; / c* _5 y: C: A' I/ F; [
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 H/ G5 ?% a3 d4 ~border:1px dashed #000;
8 M8 \; {5 O  I/ D}
7 R. v1 M  r8 M5 ]-->   i  y: s7 B( d; A+ D
</style> + l  V1 |9 e# m' ?: E" P; a1 |  L# b& j
</head> % c4 I- A+ y6 ]
<body>
2 K3 D" A* q- y+ J<div id="pic"> ; Y8 v) {2 \  c5 D5 j! T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) @: F" V% x* Z</div> 2 @9 J7 I4 v$ C" x
</body> , R( n0 s: f2 U% B
</html>




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