Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
# M8 O1 c4 ]$ @( l/ T4 K, p关键在于:max-width:780px;以及下面那行。
) h: @# L0 T' j* o固定像素适应:2 B/ |& t) M* ^* T
  I. |3 p7 |3 B8 q4 Q
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>  以下是引用片段:
8 t" z  o1 H& f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 k2 q& T$ R4 v9 C% G, c
<html xmlns="http://www.w3.org/1999/xhtml";> 6 d& i: @. T/ x6 p- k
<head> . \* r# Y6 ]* i# W, \
<meta http-equiv="Content-Type" c /> ( u* W3 a0 V" \1 V& I* m
<title>css2.0 VS ie</title>   w' f6 Z) c, Y5 q4 r8 @4 b2 {5 [
<style type="text/css"> & j# q9 N: I6 c! u/ r' ?$ f
<!-- : m( r; |7 n1 g6 L- b5 {
body {   n+ X! G! y+ ~  k
font-size: 12px; 2 W7 l. p$ H2 \8 b2 d' ]) ?- h: V
text-align: center; 3 ~( N* H1 R* v! L, m  X; N; t* ^
margin: 0px; 4 u0 u. R  o' D6 [* T
padding: 0px;
& |! [6 n, X  T}
) x6 E  \% [& b#pic{
" E* S3 F" H' R& a# A+ N1 G  margin:0 auto; * |4 N5 [% F. ?" A2 S/ j  O( }- ~
  width:800px; . v4 L, ]% b4 J: T
  padding:0; ( }- L) ~5 S  w) V% L% j
  border:1px solid #333; 1 v9 ~2 U, h2 I8 m  O
  }
  C3 ]+ |. }5 l6 Y#pic img{ 0 r% _( g7 D0 M0 B6 o; L4 {6 @
    max-width:780px;
1 \) Y0 j) W( u& f- t% j5 f$ l) ?width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ T' v! D8 }  Aborder:1px dashed #000; + B& F, g0 y" K: r; \! ], A
} 3 K# Y; u% c! K
-->
# Q* V/ J7 P3 L% v  `7 n" N" b</style>
  V1 @) |3 K9 a; w</head> * g. \, }+ ?+ V  B3 D
<body> ! m* b/ n9 c6 T7 ]& q
<div id="pic"> . S  `7 |6 V9 X1 L0 L6 {; P
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 ^+ j& f7 j& k; {7 l+ ^</div>
$ d3 O) d4 |, K- R</body>
5 P% L) ~2 B) y4 K: p! h$ u" k$ ~</html>
* g- y! p9 t. Q3 r. a3 b: e3 s9 O3 s
百分比适应:! C0 C# H% Q0 y% F, W; L/ x. ~8 i. O- ^
以下是引用片段:9 l8 l  {6 m6 m8 u* h/ I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 G; {+ y8 g5 C+ V! |( U% |<html xmlns="http://www.w3.org/1999/xhtml";> 3 P0 z$ l  v: ?5 `+ s
<head> 3 T; e3 Y4 `5 N7 E0 H9 h
<meta http-equiv="Content-Type" c />
9 z! s5 s2 w/ o0 b<title>css2.0 VS ie</title> , @+ r: k" R+ Z4 w" @8 }
<style type="text/css">
7 b9 j/ Z1 q5 o<!-- / ^2 h( }7 ?% V2 `  v- p2 D# A
body { 8 {) W% ]' S- |6 [6 c* I
font-size: 12px;
' r) T, w6 F* D) H* }! [! I4 L/ qtext-align: center; + T+ ]: c9 v! ^* B' U8 ^& J
margin: 0px; , C( w2 t3 C0 W( t9 G% w& ~4 ^0 ]
padding: 0px;
. [4 x" ~8 f) d  t5 I) i}   H/ f0 S# `+ ?  U( k4 `
#pic{ - A! s! i  l+ I
  margin:0 auto; ! T+ W- ~# `! |4 r' J
  width:800px;
, l8 n- e7 M) d7 o8 Z  padding:0;
/ h% h% p* Q& g7 b  y& D  ~9 _( I  border:1px solid #333;
& ?5 X, q$ I: o% O" d/ u4 f  } - f/ u! V" P& t$ [0 p7 u
#pic img{
+ W; \, n4 V& ~5 A( w    max-width:780px; 5 ]7 t9 G% \' D. N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 \! ]9 Y! H& h; p- M6 q' P2 Oborder:1px dashed #000; ' s6 Q. E. [9 [9 V
}
/ M+ G  L5 y1 {--> / S& @3 k% I8 N8 @5 ?
</style> " l+ l2 g9 b& g' @, y
</head>
0 I0 s. k4 H4 ]<body>
" {) e: Z7 x/ w& e1 }/ e# q8 L<div id="pic">
4 K$ {+ ]. w$ W, g0 C7 c<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 a+ Z/ f+ O5 y( g1 I! b6 D</div> ! l; R- u2 H/ [# `! N3 M+ o
</body> , h2 k8 x* f1 j# @( {* e( A( a; `
</html>




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