Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。) H; O. z3 L; h. w$ V, G
关键在于:max-width:780px;以及下面那行。
. D/ L! S* v( c* O* U固定像素适应:
7 j& V9 Z. I, F2 t# J& q( S9 T+ W" B0 S4 N9 i0 S* n; j# p/ J
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>  以下是引用片段:* w$ {0 Z2 x$ C- [* e7 z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , N; R  ^' X/ ]. _0 m% I  n
<html xmlns="http://www.w3.org/1999/xhtml";> , n; ], B# r, T5 x7 b# N
<head>
* r; [: s: `- U( ?<meta http-equiv="Content-Type" c /> 5 T: u- c$ {) U5 |, T
<title>css2.0 VS ie</title> 4 y5 k- e( G0 o9 s) C
<style type="text/css"> ' L& d- W( c6 J- e& K3 S
<!--
/ Y0 w8 Z6 P& f' v# y5 obody {
6 ]: ]: y5 I, z0 Y7 Dfont-size: 12px;
0 d: ~+ R6 u/ j3 \! }text-align: center;
" X, _; N' j" umargin: 0px;
" s% r2 S+ I& v6 y9 P( `5 E3 {padding: 0px;
* i9 f* q! }/ Y, w}
2 q. X7 S! V# |$ j4 ~& P#pic{ 3 ?' [7 X- p0 d
  margin:0 auto;   l/ U. q: D1 X1 j; C1 O. M4 E
  width:800px; * m" w% H0 D; r/ H% }1 r  {% q: H5 X
  padding:0;
' ~$ h$ _& c, ]) ~  border:1px solid #333;
. }0 C! r# a- f& R+ r; ~7 N& L  }
2 I1 |* @+ Q6 H6 L4 ]#pic img{ 2 q$ z* \1 C/ Q; c6 C5 ]
    max-width:780px; " o4 Z% O. J0 @8 }: I7 Z1 y) m
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 j. C0 `4 n( V, [border:1px dashed #000;
! U5 Q7 L' P2 t}
9 a) C/ \1 R9 `( C-->
/ L% P4 F+ u2 I1 H1 v% q) i- u</style>
/ c* o0 T+ Y8 M4 {2 K</head> 6 o& @' Y1 q+ c$ @! d) S5 I8 H$ A
<body> 0 Y# T2 B6 h! ^( m, {' z. {# n
<div id="pic">
7 x9 M& e5 h( J) g0 k$ g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 q; I  V) M6 f) Y7 T9 t
</div> - X' c$ J5 R* q3 h* I
</body> , \' r- N2 D4 z8 P! N) F
</html> % [: W! M. d( ?& \5 m' m; \! i

" P, \5 K. s# w百分比适应:7 A+ |) T% H# _: E
以下是引用片段:
0 l+ p* W/ J3 |7 {+ p, }  \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" q) G# b4 U) c- a3 g<html xmlns="http://www.w3.org/1999/xhtml";>
- `7 j6 E  O8 A! l# F<head> 2 J) e1 ~) {( I+ |
<meta http-equiv="Content-Type" c />
) b3 U' l! \, j" W1 N$ ?, z<title>css2.0 VS ie</title>
8 g& u: j) ]6 a$ w" k8 r; F8 a<style type="text/css"> % Y% P! B( J# ~9 x) a  b/ \+ h
<!--
- G* O8 q6 ~/ k( h2 j0 Qbody {
- f% O1 x- ]( A; J: S2 p, Dfont-size: 12px; . |6 h" Y0 P9 @) J1 z$ f) s- N# G
text-align: center; + t: Q, G% Y* w# H2 `
margin: 0px; 4 t, s. ~  _8 H4 f) s- F2 o
padding: 0px; 8 f6 w4 O% X1 [( O9 P
}
* A- J; ?  F) _( O+ B- `/ o#pic{ 1 ~/ ^) e2 W) o
  margin:0 auto; , w* J7 J" O0 L% s" Y: U
  width:800px; 8 q, I5 F9 m. W3 T
  padding:0; - _) y" \8 p! l0 e8 t: _
  border:1px solid #333; 7 z; X: y9 q! U2 C
  }
/ [' V" s, ?5 a) i2 Z% B, _/ H#pic img{
/ W' U  x, R& _6 [% r1 s    max-width:780px;
2 O2 s9 g0 }6 c; `$ Z# _; @width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. J! `0 ?  w6 {border:1px dashed #000;
+ H4 B' d. K( H0 ]- b$ J} 9 G% c$ O6 z# G  q
-->
* k/ m/ j) y8 v3 Q</style> 5 H' [' \4 K1 C
</head>
/ T+ x* X9 r  j2 u<body> , \. r' `% T6 p6 V
<div id="pic">
) b: K, t, p9 Y" d* }& O. O<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 F* l. m' `9 N! T. n% [</div>
* S7 E3 N# v& P1 L3 u' R- m4 ?7 Y( U</body> 5 h  o! D& O9 E; q- D" T
</html>




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