Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 J- E1 B! `( Y$ A7 U, _关键在于:max-width:780px;以及下面那行。
6 h. q2 b% `# I  ^4 E# h, n固定像素适应:" a5 C/ u# ?. F3 ^" \
' p3 e( b$ p& Q$ X8 D" o
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>  以下是引用片段:
3 T. h3 Q% L; x2 T! L; m3 ]0 ]/ R<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * Q: b4 S9 j7 Q, \& v/ I
<html xmlns="http://www.w3.org/1999/xhtml";>
! l+ x! g! ?! y<head>
$ ]# G9 a9 D9 h+ l5 S1 M6 u<meta http-equiv="Content-Type" c />
  s+ v4 {7 K! r( k% n" }<title>css2.0 VS ie</title>
1 c6 j8 j( P* L. y& v<style type="text/css"> ; @5 h5 P7 h6 t" D
<!-- 7 r  m" \7 A  O/ A2 }' H
body {
. D7 D# g1 k9 \0 r: Xfont-size: 12px; / H$ Q* a5 u; n" ^) l) H3 B2 n# ~
text-align: center;
$ H( `+ q! t, smargin: 0px;
% U+ b5 b: }9 Q0 ^- zpadding: 0px;
' r: A5 B. B# w+ B} # d/ k1 j( Q& F& V0 w! ]+ J
#pic{
2 K( K' y' @/ g0 d8 f& l* `) H  margin:0 auto; + M0 o* P2 r! i8 J: g/ e
  width:800px; ; O1 r6 J4 H. v' ~! A
  padding:0; 8 |7 i; I7 [( r9 x/ R$ b9 F1 ]) n
  border:1px solid #333; 8 t( _2 w  X: |& |7 Y0 k
  }
. S9 a+ r* [4 H: k; @! y$ z% f#pic img{
& f" E$ X! U) f0 i    max-width:780px;
4 ~& t; \& C  a0 {% R4 x' Swidth:expression(document.body.clientWidth > 780? "780px": "auto" );
! x. r! k0 h( E9 q1 q) Vborder:1px dashed #000;
$ N4 ]0 ]9 ^( m4 r; Z' J. F* t. _% a}
+ j7 R3 Y# r. ^1 y, _-->
9 o6 v. S; c6 O2 b- o6 c</style> - t4 r# c" R- l+ P/ }1 |/ Q0 l/ p
</head>
% H' v3 M) V# K1 h# n5 c<body>   ~0 i6 G" x) x' U: g% H9 J
<div id="pic"> " S; M5 U7 L& P( c; n
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 B% U* G7 S% q/ H</div>
6 B- k* W, y8 V/ p/ S" a1 P" J: K</body> : d' ^. Z$ b6 G, @/ Y
</html> + L3 _  S+ s: v/ Q
( p8 z4 }0 ]- b' P0 l
百分比适应:
9 q; i& d4 |' F2 l8 T以下是引用片段:2 o' z' g  P7 t; P1 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ x; m3 \. a3 z5 C$ Y<html xmlns="http://www.w3.org/1999/xhtml";>
& \* V9 c1 }% I7 n<head>
# B( \+ o! ^6 B' e<meta http-equiv="Content-Type" c /> 7 ?! t2 P; \. N2 Y. o9 Z
<title>css2.0 VS ie</title>
, N# C  y6 d5 m' {<style type="text/css">
. Z3 _8 {3 B# D  t<!--
+ F$ `* e8 L" o! R+ c5 bbody {
2 A* g! n( ~2 M$ efont-size: 12px;
! U; r$ H. y3 |1 E# I& E) \" ?% d. Ftext-align: center; 3 A" [, i" }/ s9 k( S8 ]) ~7 U% b5 j
margin: 0px; . U0 R+ [8 K- m
padding: 0px; + B+ k- F# {! v" e( R, l! g0 }
}
. p" `1 d  x# S/ ~" L#pic{
0 T) k& R, |! ^. k& s5 B: |  margin:0 auto; 6 D$ S+ c( d! J; F! a4 |+ ^$ v
  width:800px; - V3 G7 _. Y; g8 [) q
  padding:0;
) s$ j+ z+ n5 W8 P! h+ z  border:1px solid #333; 2 k9 \! T. o$ G1 t  D
  } 9 _1 m% G6 T0 @3 M. h+ W
#pic img{
3 n8 N$ v3 p! b! f4 ^    max-width:780px; : l" j6 r2 r, |3 e# ]' c2 k4 V3 C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 M& {& R& U7 R: aborder:1px dashed #000; ) m5 J5 `! d9 d1 G0 J6 y
} 7 E. G1 q' p6 z* C$ A1 x
-->
* C( W' @, [+ @! o" N</style> + u2 F' y3 D/ q' @' f
</head>
$ \1 Q1 i% M8 _- N, X: `2 m<body> / E# ?6 z: @% W' C/ x
<div id="pic">
& @; m, h9 S8 q" }+ W* k7 ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  @& z) S/ R" W- l1 r% w</div> ; N4 n- E0 X2 @# Y
</body> 4 y5 u; B( o% s& h% E; K
</html>




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