Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ u" d% c. F/ I$ Q$ l7 K关键在于:max-width:780px;以及下面那行。
% |  w' Y9 j: [! i, r7 n固定像素适应:# l( I/ F) f& A

# W7 W) `& f$ H  _$ `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>  以下是引用片段:
7 E$ B6 S0 |7 H  c) m; E8 S7 ^0 h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - A4 F  u0 u( B
<html xmlns="http://www.w3.org/1999/xhtml";> ( J6 D& s5 b. Y4 S
<head> 1 u3 Y/ x* o+ P& L9 [, d
<meta http-equiv="Content-Type" c /> 5 m! l6 F1 Y, d/ C5 n
<title>css2.0 VS ie</title> # P! f" G2 B) d3 k# }
<style type="text/css"> 1 b6 X. @$ [  u
<!--   U: T' y& K+ m" M# ^7 R
body { 0 t8 X& l4 w0 I2 H
font-size: 12px;
- |' V4 e) b  B% _: c8 ptext-align: center;
: Q+ v# P# G. ~margin: 0px;
4 o# D+ h( j. {! z) V$ R" [! Lpadding: 0px; + M7 H) T8 X8 Y: Q
}
, I( r- ^8 I$ X#pic{
5 s: T6 q2 e( M! m  margin:0 auto;
8 |, g' T' H9 M0 z5 @6 `  width:800px;
! r/ t7 E# I) A; t, Y  padding:0; 7 ^" C. h8 X% T  H' S' H
  border:1px solid #333; 2 M, f  X3 _' E0 x0 V: i
  }
/ W% p) p6 t+ ^' }+ M+ s6 I1 T#pic img{
6 \& `( C( s: Q8 P. C! Q    max-width:780px;
0 M3 E4 P& O* [0 S, N% Zwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
$ t8 i; S% X8 aborder:1px dashed #000; . z% A. C/ j$ ?6 ?, e; d0 s$ L* ^
}
9 g- z# r5 ~1 ~' Q  z; D# i( o% F--> 9 P. f9 X2 P3 l) y1 _
</style> 9 k! z- f! Y! A. j, m
</head> ! ]. a% x9 v6 }$ O. X! |  h/ a/ @
<body> + k. K6 v- r: e( u- U
<div id="pic">
( y( l9 {( f6 z! \6 T) K: Y' |<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
1 m' W. P+ J- H, u</div>
- {9 R9 O- y: G# \1 B</body> # q8 O7 c6 t( I' Q  A
</html>
5 j9 [3 I: ^8 ~7 z4 ^' F
# j; _" U) n7 c百分比适应:5 }$ H, v  {8 g- e# ?
以下是引用片段:0 F, _( W, z8 k) W
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 d+ B5 Z8 {) l0 O2 |<html xmlns="http://www.w3.org/1999/xhtml";>
- K1 G( W6 j$ l- X* O. |<head> 0 y" x, _8 M' M0 U
<meta http-equiv="Content-Type" c /> " d* f4 h2 R0 |2 l% _' j
<title>css2.0 VS ie</title> 5 X, V' p3 {0 n0 e* \
<style type="text/css">
" ?$ m- i! W' Q' e! _<!-- 3 {! ~2 Y# B; x* v- T
body { # l/ M. f4 ^( s6 R! e) D3 F* c+ }% A
font-size: 12px;
1 Q8 ^# \0 ]  Ytext-align: center; ) `' m' D3 Y6 P. r
margin: 0px; % l9 \" F* F  s  y
padding: 0px; 2 M: x, ]& K/ r- Z1 @
} & x% Z8 n" N- Z2 [# n3 }
#pic{
8 o. o( S2 t3 e! _3 E3 O' x  margin:0 auto; 7 u/ u- c/ ^9 B3 A
  width:800px;
) y: L6 H5 a: Y- x+ f  padding:0;
9 ~! _6 h- e- [5 r  border:1px solid #333;
/ f: S8 }; z  j; e  o: `" l  }
: j6 Y+ b6 D2 n( X% ^#pic img{
' Y9 t# z- h+ z' O1 V0 y    max-width:780px; 4 h! u6 R2 ^6 N7 P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) C/ u! g, n9 ]border:1px dashed #000;
9 D* _. ]' F1 k}
5 I2 Z! f! C6 e2 R4 ?--> % _  \9 {8 P) u& m! ^1 n
</style> 8 F2 q& `7 j: |
</head>
# j# j' F& W; [2 h, Z<body> & a7 q" a' V6 V0 r
<div id="pic"> & T, X1 x: I' W, C  q- c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) ?# X. n  [$ X7 E7 Q8 v7 j</div>
7 N# [. O5 t8 z( o6 D</body> 9 |& D2 H) h0 f6 C! ^
</html>




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