Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) v# [, b0 T3 L7 g1 ~( \( I/ h关键在于:max-width:780px;以及下面那行。- u1 h1 S0 t- @3 C
固定像素适应:
) Y/ F8 U( K! i( z6 B: T3 D  Y% q# k, ~$ X9 z; ~4 }
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>  以下是引用片段:
5 T. v. n5 g3 P8 A! u9 `) t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 y0 p7 z/ \1 B6 g* I% \5 ~) S/ F
<html xmlns="http://www.w3.org/1999/xhtml";>
( Z6 A0 {. J) h5 u2 H0 R<head>
3 K: W+ V" A8 s0 s2 P- u, Z: s<meta http-equiv="Content-Type" c />   A6 a# |1 e+ z( u4 M9 W3 a* Q6 i# J
<title>css2.0 VS ie</title>
: p1 S' |# u& G0 J5 {# q<style type="text/css"> ! j7 O- a( G3 b8 h6 J
<!-- 7 F2 U. c" P# u6 J
body {
9 r) c2 ^- @) R* d" E6 b/ |% ifont-size: 12px;
# D1 g) r7 p$ K4 x2 ?text-align: center; " b: e% l. M  i/ P/ F4 T
margin: 0px; : q. y- F  R& L* j$ S, m, A, s
padding: 0px;
. D# A; z9 ?' E% s$ B% p7 c}
* U# |9 P) X2 N7 f#pic{   U; z9 p# l; ]: g6 h
  margin:0 auto;
8 q3 @5 ?5 t% G8 L  width:800px;
+ ?5 y  V2 b- }  padding:0;
- F: D* W& {8 O  border:1px solid #333; % F' N7 g% q, s4 x% v
  } # V3 r8 ]5 B( f% E. N' Q
#pic img{
. X) J3 r+ R) n% w4 l! v' ?. p    max-width:780px;
& G/ n' d- @+ r: f; gwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ) ~: _# `* D- W; h+ N2 t- Y
border:1px dashed #000; 0 Y& `: q4 j$ L
} + E' g% v! {, M5 {
-->
4 E& z1 R) h, Q( G+ H6 q</style>   X* g8 V: n4 m7 H
</head>
0 |* o9 S3 Z: A4 w* ]<body> & ~0 z: E0 B* A' P4 J
<div id="pic"> 2 u0 i% l7 J. i5 ]* ^$ M5 t1 n
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 _/ w* Z, m4 D1 Y$ v. E! q' B4 K
</div>
# B+ Q7 N0 J8 P  J</body> # H  q/ C, }" P+ a! @+ L1 [
</html>
1 I' H" U5 A& e. m, ^" G
4 o: \& i, ~* \' Y& O& t百分比适应:, ]7 e2 J* \' M) \8 @5 l
以下是引用片段:* R$ s) j8 ~! H- h. |  }6 \" ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; @, |2 U+ g2 B& F- K: {<html xmlns="http://www.w3.org/1999/xhtml";>
5 |) c2 w! Q* V; H; ?<head> # y$ w4 `$ i9 U7 ~! h
<meta http-equiv="Content-Type" c />   f7 L4 F4 U: c, }
<title>css2.0 VS ie</title> - b; K) C" H7 ]( f7 t' x
<style type="text/css"> 0 d1 y+ O" |$ R) r% K" n
<!--
' @+ p3 h2 R* k" W" Ybody {
# Z' f4 u7 x8 x( t3 dfont-size: 12px; " u; P: l6 b" ~3 S) ^( V
text-align: center;
$ v" x" ]9 U0 B0 ^7 Y) t. lmargin: 0px;
3 T& Y+ K$ ~. ~, ^& a0 Ppadding: 0px; 3 q  w& c, {, ]1 ~% h: e
} 8 M% M: {+ M2 j' V
#pic{
. i1 r* ^$ T' B: `: |4 q* R) `$ W  margin:0 auto; ) e! t! z3 P  [- Q
  width:800px; + y, U9 {9 R! ~& ^* G, o- Q* ^
  padding:0;
& [& g! Y- w- e0 g9 R3 R  border:1px solid #333; # j9 d# ?- {- H5 ?8 V
  }
- o0 E  ^4 v' G# \( h- X+ n#pic img{
" ]/ S# w+ h" N  a5 Q. k    max-width:780px;
2 e3 q. @! }; d, k# @! Fwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
: N' h" T# p: E- |border:1px dashed #000; 2 A* G: C& a& B9 O) r- e: }7 Q8 h
} ( {- v2 E. P& }: \
-->
1 }9 Z3 Y' k9 o( l</style> 0 q# S* }  o3 c  X
</head>
) `! T* y4 Y* L; N1 S6 x; y<body>
4 R! E8 r  t' L+ Z/ l<div id="pic">
$ ?* C/ i( E  N" l. u* q( T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  V+ j4 J3 B0 G. T; q</div>
/ M0 I0 B7 V! }$ i% Z8 g" p) ?" K- u, A  G</body> / V3 y+ K! \$ T: ?" L; U' N
</html>




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