Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
" I5 Q0 g0 |2 N9 T6 y9 W关键在于:max-width:780px;以及下面那行。$ w( I- ?) w" b. ?3 W' \8 ~
固定像素适应:
: l+ [$ _) L, y& I" e: ]
* k& ]! E. U( T3 d! H7 tdotted; 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>  以下是引用片段:
+ j# E4 |2 m2 F$ ?* q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* I1 w+ b' Z) p9 O<html xmlns="http://www.w3.org/1999/xhtml";> 6 h) G: j! }( Q# G3 O9 l! p3 Z
<head>
7 u# V3 E. T+ u: k<meta http-equiv="Content-Type" c />
, p- u" F; f* m, Z<title>css2.0 VS ie</title>   x! n- f. K4 d# V  R
<style type="text/css">
2 b$ }+ }9 T8 W9 a( o* s; R; c<!-- 5 \/ `4 l, m! M7 }$ R( A- m
body {
5 n; D" P& C) ]& Xfont-size: 12px;
  V' N% [. J4 h0 z1 X  Itext-align: center;
2 `7 i7 B0 ^. O/ c. c, Amargin: 0px;
/ F; a7 ?' _) x' ypadding: 0px;
2 v3 u8 n1 Q, `/ V! k# e}
$ P& q+ H+ _+ @; U+ A#pic{
. Z/ ~, d- Q9 Y3 M. }$ @) D% u  margin:0 auto;
6 J/ p  n" C5 Z) U% {+ q" ?9 P/ ~' t  width:800px; , e& w# T+ C, b( T
  padding:0; . s6 q. @6 l! X/ w
  border:1px solid #333; ) U2 d8 ?6 J0 b, ~
  } 9 q8 P( z3 L5 t+ V6 o1 K, U
#pic img{
. h- y- H* i5 v7 M    max-width:780px;
' n& R) r! {, z) G9 uwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
+ o6 X) _/ ?% s! n; |: R9 @9 {/ t* uborder:1px dashed #000;
3 K& v4 U  L2 l7 l4 a. t, {8 J: d+ J3 p}
6 M2 x' |/ T& L1 O2 E0 \6 P--> 7 E1 H" c. T: i
</style> % X% [# m4 e; Z) V
</head>
, n4 g5 c, u  R<body>
, G2 O( M; X: S  S+ O* v3 B<div id="pic"> - h4 K, m* s1 r; R/ G9 M2 _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
* U% N: b3 W: b& i2 r; Y</div>
) B) G% X' V/ v4 J% \1 N& u</body> # O: J; p& x! P
</html> * f+ T; z$ M  L- M' h; H
5 F- U4 \+ T/ T9 r/ J) j, r
百分比适应:3 F+ ^" U* j* O5 O
以下是引用片段:$ K* y8 d+ ?/ z; I: f: `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ i5 K0 }( k) ~/ H5 D! ?<html xmlns="http://www.w3.org/1999/xhtml";>
3 X; s+ h8 ~& p: ]<head>
7 i$ x. o# `6 C<meta http-equiv="Content-Type" c /> ; E8 w$ f+ Q  R: ~0 i
<title>css2.0 VS ie</title> 7 ]* a& ~1 ?5 P9 m) }% w' x6 t; o) H
<style type="text/css"> , g5 ]0 u$ j  a, z( K- Q
<!-- - n7 I2 ?) K5 T
body {
1 R1 Q. Z, C# U4 gfont-size: 12px; 4 U  M4 p5 G- R( @- g
text-align: center; 2 W/ \8 d/ N. H4 Y# ~; Z
margin: 0px; 3 Z% `- G/ D' B) G) P3 @: u
padding: 0px;
7 A8 A, V3 \9 q6 v2 F3 K8 Z}
7 {/ l# x3 g9 Z: m+ y  N% N#pic{ & G5 N* a# F1 \2 `& _; S, I, S
  margin:0 auto;
6 j8 `' `0 x$ [% `" k# N) ~  width:800px; / i. D4 O- a& i! u% L' ~# r; H& l" A
  padding:0;
& K; y, P  e  d  w  b$ C  border:1px solid #333; ( k% n! A! r2 {% S
  }
' X$ h+ o& e3 W8 K6 \#pic img{ $ `; k3 `/ w) L5 C
    max-width:780px; - _% A3 s2 L, S9 G6 p  ?( h
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ; \3 B0 E5 y% v, a, {9 R4 u
border:1px dashed #000;
. e4 N* o5 u  ~} ) G# T% c* X- V( E, c0 V! k5 D. \+ j: m
--> # s5 V9 }; D* \  J
</style>
4 t! Z* y8 L# S9 }0 u5 D% k</head>
, x" M" r' a, v<body>
1 A+ f& {: B8 K4 }) S+ h<div id="pic">
0 H1 U* }( B/ l' ]) \$ Z. Y3 J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 H. w- H/ p3 O, Y9 c) U</div> ; k: n2 G  A% f- v& F8 H, [
</body> 0 L  V& h! e7 y6 k$ x
</html>




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