Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ B2 J/ I( W: Z. b( A关键在于:max-width:780px;以及下面那行。3 ?$ y* v0 r- @6 x7 b5 O
固定像素适应:) C0 o5 q/ W% P8 Z

* }! h& G* [  Q  U0 @3 q2 ]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>  以下是引用片段:
) S$ J+ g( Z; ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 4 g/ V& A7 P: g8 o( b  O+ \; [
<html xmlns="http://www.w3.org/1999/xhtml";>
% V* h2 g0 d$ \# g" }( }+ E<head> 6 e9 q; J. ?& W; d
<meta http-equiv="Content-Type" c /> & K* P% \8 D7 {& V6 o) y
<title>css2.0 VS ie</title> 9 v  {! q) E1 c' F- h8 Z
<style type="text/css">
. Y; I# X6 \* j+ L<!--
0 z9 M/ B$ l6 H* T* [/ Ybody { ! K( h( F: q8 W8 Z6 `' t
font-size: 12px;
! a) m2 o& E# q4 i' T- T' otext-align: center; ! t" s0 H5 }) q5 D! `9 U' |4 h/ H
margin: 0px; 9 `5 m" n) L! N6 B0 ~9 F, @
padding: 0px;
$ }6 L: V% S/ w3 a! W+ N; t$ l$ j4 ?}
  i  |0 K# e: b$ F  C! L1 V* `#pic{
' |. Y7 q% j$ ^7 a9 I3 ~9 A  margin:0 auto; , X7 x! X6 h. F2 o0 j; e6 Y6 T
  width:800px;
  C2 z' ~( p) H4 h& k  padding:0; # A; S2 N- u2 [$ D: F7 b
  border:1px solid #333;
4 R& B) Z  L0 E+ s  }
- ~. I$ Z2 t1 K#pic img{ # u* i9 d, C# F
    max-width:780px;
/ z& v2 g0 k5 s, ]- e. F: vwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ) h0 a, T  p& e, Q9 U
border:1px dashed #000; 7 F8 M* ]8 |  b4 G& K5 ?
}
2 i5 h9 ?; d- o$ C: U+ P-->
, m' Y9 E9 W$ F$ e; n- j2 {</style>
( L4 D) f3 V% @8 o# @, \</head>
: p/ ^- X8 e& z  c, }<body>
7 h' v$ `9 N) b# V& E7 p. g9 ^<div id="pic">
0 O9 ]5 p& k0 `% I' [$ u) `/ q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' V8 v) g& ]% K( c( r! V) K( y: [</div> ( A: d5 \" R  U' q* s# U! z
</body>
- H8 Y- p  x% c" v2 _</html>
2 L4 w7 s7 ^! @& t5 o1 Z: {
0 a* _! N2 ?! Y8 o$ \百分比适应:
0 P( @" K7 ?# r3 r( y, r以下是引用片段:
7 K' I, K7 b0 J6 [; {7 P( o* c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 j) h5 ^* k8 C- ^1 u# P
<html xmlns="http://www.w3.org/1999/xhtml";> - ~1 {- C- y# ]0 [+ N0 h; a/ R1 p
<head>
1 p# W. q" c- R<meta http-equiv="Content-Type" c />
. F5 i: v/ B4 f6 [  K<title>css2.0 VS ie</title> ' H* D2 T# g- d) H( Y9 H2 c, W3 e
<style type="text/css">
4 ]" H. R# f. X2 O$ @0 N1 e<!--
  Z5 U9 I; W8 T5 H* w% ?body { 5 O' P" E# U/ Z: y; ^. b( `0 F0 d
font-size: 12px; & U; \( _7 w% O6 b# L: j$ o4 s
text-align: center;
0 O5 H) ^9 f3 k' |( Dmargin: 0px;
9 [, J7 i+ p# V1 T1 tpadding: 0px;
, |, q0 H9 t5 K% @: G- P}
$ q& x) m  U  X8 x$ B, h3 {#pic{
3 a2 n; t9 v/ ?  g* ~- L7 c  margin:0 auto;
( k; P/ h7 M8 Y0 x  width:800px;
) Z: c* B: b# O7 c( y+ n" U2 f! j  padding:0;
$ d' q4 L3 s) }' l- m/ E) m. N  border:1px solid #333; ' N- g9 i& C: ^7 K
  }
& e0 C3 Q, ~. U' q6 s. S1 U) H* |#pic img{
7 t/ t+ H/ T) m5 V6 t4 R    max-width:780px;
3 R- u1 h! h* U8 P3 J8 _1 Lwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 F  J" }9 q1 I# D/ Mborder:1px dashed #000; ) j. s- c' B7 x/ n$ M8 t) K& Z
} 8 R4 P7 O" C; e4 ^( Q0 R
-->
2 j% ~* H( K4 s# K7 c</style>
( V, k' u' b$ i' j7 B( n. A: m</head> ; G% `1 F- t  s' `& z
<body> $ F- f, d5 j4 S5 e5 H" P& |: M0 R# i  g
<div id="pic"> 9 w0 k( p! B/ k
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 o: Z' S+ ?0 a$ ]# K</div> . W! s; N4 F( N* c+ q* y
</body> 0 {3 z+ O+ D6 @7 Q( A9 A5 p: ^
</html>




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