Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* ^3 u0 K/ g. B" V
关键在于:max-width:780px;以及下面那行。
& v  r6 g! F0 b2 g7 S, m固定像素适应:
6 I% K7 P1 Q8 s$ C, P6 x! P- @
' r* I* ~% C' @! s& a' P* F6 sdotted; 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>  以下是引用片段:& ~, h% f. L! b" f6 h3 _- l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ z5 p+ C8 I' `+ U5 M<html xmlns="http://www.w3.org/1999/xhtml";> $ {1 k3 z1 C4 K
<head> * E% `. A' t1 P+ T2 R$ c, |
<meta http-equiv="Content-Type" c />
2 N# t! \) D& ~# x' K* @- ^2 q<title>css2.0 VS ie</title> 8 k- |* X$ [1 O+ w4 [( F# ^0 j
<style type="text/css">
6 w: [1 g1 a/ W' p+ s<!-- , H" S9 Q" P; Y4 X; x& u
body {
& i) B% a! d$ hfont-size: 12px; 3 D; L' A6 C9 x; o2 d3 M
text-align: center; + _2 k( y" M  D/ _
margin: 0px; ( Y& ]2 M" \) i) S& Q
padding: 0px;
# x6 D& S/ A7 k: n; ?. Z} . n+ v7 W% G+ T2 ~% W
#pic{ : B& k. X+ T* a8 D. b
  margin:0 auto; : j: U, B6 \( |
  width:800px; % s/ d4 Q# ?. |1 `# Q% l
  padding:0;
: U9 Y* y& d3 W( D  border:1px solid #333;
* ^9 Y3 G0 D9 K3 W0 O$ H! j8 q8 t  }
3 S4 C1 J4 c" b- v7 a8 h. X#pic img{ 5 X4 M# \5 h' t- h" t
    max-width:780px;
; P6 l# ~. z+ s: N( Bwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); * I" O- J9 W- |* q: p; o
border:1px dashed #000; ; a/ r8 }) X( q  S4 U" E7 n& p! P/ f
} ( ^; v) z3 M6 o0 M! {3 \
--> + h/ S% e% }; `  S
</style>   e2 ^+ c: J9 w2 [1 Z2 F
</head>
3 w! u; I) h: p<body>
/ y  T; d& j! @( G7 P# f4 _<div id="pic">
4 H' L( @$ I, M<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ q; Y" a1 n- l( N* Y
</div>
! {& u7 w$ Q* m3 [; Q1 l1 r6 Z</body>
- ^6 k% W, m% B4 S, n$ d</html>
# |# W5 L! z( E0 m) u* Q# A
5 Z' D0 `/ x7 B0 ~4 J6 ^0 `3 G6 ]百分比适应:8 Y. A% X% R% O! g
以下是引用片段:, K3 l9 M" }; C) [$ L( E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% z; L" a: n7 z5 d  j# Y: y<html xmlns="http://www.w3.org/1999/xhtml";>
- I& a9 s  T- i$ K<head>
& Q6 s) C, m, i, i& H5 j! R5 o" h<meta http-equiv="Content-Type" c /> , {! U  Y5 W6 N$ `- I
<title>css2.0 VS ie</title> $ ~. q3 [! `* h* n, p, q  s
<style type="text/css">
9 {3 b5 Z3 o+ C* j; r$ J<!--
  p5 y+ w8 _$ C" C. i0 \2 Y! xbody {
* V: e) ]+ z  r# J7 Nfont-size: 12px; 5 ?( p( l/ @( b. b
text-align: center; ; e3 \! [6 n' J' F3 z, I
margin: 0px; 1 Q! Y6 Z! r& @% E; A: Q  d
padding: 0px; % W! E; Y6 h4 T1 O' `. u9 O
}
3 l$ h" {2 T9 T& d# w- N#pic{ 4 q* f; m( }. t* ~9 b# c" ]
  margin:0 auto;
5 w/ z1 R# F: \) B8 }; r  F  width:800px; 3 S% G1 p3 K& F5 C, s" V
  padding:0;
  N7 p- `% X# _2 m$ L8 F& b7 n  border:1px solid #333; $ i3 p! w$ F- P. w- @% g+ Z1 V7 L# g% ~6 A
  } 9 X$ @* T" |* P5 \' C) R" X
#pic img{
/ b% c4 u8 H# f# F; F    max-width:780px; 6 z* m3 a4 z& _7 k+ c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( c3 M# Y8 ~8 h& `& z* Iborder:1px dashed #000;
: |" ~- L7 z# v, _' T& o} * t9 z/ C' p% ]& g( a+ L: P
--> + S9 |9 F  n% `) V: z
</style>
4 C* W" v7 u& \, o' N</head>
) |- ^! [$ w$ \' J3 a# P; \( u) m<body> 4 s! @9 k4 ~. V# s' X8 j
<div id="pic"> + `: `# _( M: t: t% z. Q9 Q
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% d5 c* U; _' J7 U. u/ K</div> 3 n6 g. H( i) r! K% ^
</body> 2 R6 z3 B+ Q/ }: M
</html>




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