Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。: ^$ S7 z1 }9 s1 z; V6 A2 I, |( O! P* f
关键在于:max-width:780px;以及下面那行。
% B4 T' i8 x" \4 O5 f' v固定像素适应:
1 A' \" a  }6 }3 s4 J3 @5 p1 r2 V; n! `3 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>  以下是引用片段:
% a1 C% }3 `' R  G7 c: T5 K7 E( ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% ^% Q+ ?* T; B2 l) ^( q# r<html xmlns="http://www.w3.org/1999/xhtml";>
" t( S* V) |4 F2 q7 U3 b* V3 {- i<head>
1 h% n% L5 O. A/ I& g2 B<meta http-equiv="Content-Type" c />
" ?* L) E" I) V; a7 q* n4 [<title>css2.0 VS ie</title>
# a4 K0 x+ r" U$ W. m<style type="text/css">
; q8 e4 y8 `1 V$ g<!--
  ~9 P* f1 U+ B8 cbody { * t  P5 h- n) U2 C
font-size: 12px;
. R% V$ ^+ h; B9 a$ B$ `text-align: center; 5 e* O; I: t4 z) }. w
margin: 0px;
/ J6 s$ w- y( Y* rpadding: 0px; ! t8 o' g$ Y3 p" A- R9 r
} 8 @# P% h8 D4 I: B; K
#pic{
3 I2 _* g' ~3 E4 L8 A  margin:0 auto;
2 |6 t: }; K5 ^& V) ?& N  width:800px;
% N0 m8 X0 v9 C, x  padding:0;
# G' F& ^" a8 E, J  border:1px solid #333;
3 d+ K  ]. W, l& P- \2 G  } ) g9 m! w: e3 h5 M7 S$ x8 @6 F
#pic img{ ! d, b. f+ t  K* s- T3 a
    max-width:780px; ) N0 W( o/ ^; O: y: l  Q
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ) b3 F0 M" s% q, l
border:1px dashed #000; 2 A( Q- Z# L1 {4 {* K( B
} * S) R& [. K9 r8 u
-->
4 J# k, e' P: D% v' B- J</style>
5 C3 i7 r/ s  {( q</head> 9 P' |. C' W5 K) n  P) w/ j
<body> / v! T9 G* V: n7 k/ q4 K% M
<div id="pic">
) K! \% z$ v( B( E. a/ a( O, I<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# ]: m) n! S2 N1 _& w8 N; P</div>
5 l7 g: K6 R5 @7 D& t: N8 s( ]</body> % F8 i8 V0 i* q7 r4 D
</html> 4 f5 Q1 i. a  _" r, a; W

! X& F. O. h2 c2 _! d( C百分比适应:
0 r1 B6 n' u5 s+ B以下是引用片段:" _: N7 B% j1 N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / K* V; R9 |# r, S" _* I) g
<html xmlns="http://www.w3.org/1999/xhtml";> - o/ K! v: J' a+ a: r
<head> 6 [* z" U. T. p; F9 X) ~
<meta http-equiv="Content-Type" c /> 7 a2 f. p) b( [9 v
<title>css2.0 VS ie</title> + L& M3 N. \1 ~  \! F
<style type="text/css">
, X1 Z7 v/ j% h' ~<!-- ; ^9 V$ I( Y4 L7 l& Y4 b0 J' i
body {
/ d/ E' [9 Z2 ]3 u3 S! d6 I. o8 u# V. `font-size: 12px;
- f7 f# X- A. x2 b9 W. L' @& P3 v3 G: Ttext-align: center; ( _( {( f1 i5 b$ S
margin: 0px; , L" e: D$ `4 N' q4 C
padding: 0px;
0 J' u$ t( u" E2 N! a# i1 d}
3 p- z; Y9 i( T#pic{ " r( n6 C8 ~% ?/ P
  margin:0 auto; * P4 s7 f, y" J: o9 z) `" x
  width:800px; % D* j- G! i5 c
  padding:0;
0 P" ?. C" q+ m: H' j; P& m: Q  border:1px solid #333; / j: B. h3 O7 @8 E; _. H
  } 9 I. A# ?' ?5 c! }, V- P5 P
#pic img{
' V  f* S- Z6 u; G6 F8 H6 N; a    max-width:780px;
3 u0 V- }5 [" g2 Xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 w: u& S+ I: c  j" jborder:1px dashed #000; 4 v2 w' s% j" ]8 y4 z
} ' R$ S: w/ {+ R/ w9 G) S  H5 I
--> / F9 T8 z0 _' V$ H7 w
</style>
1 h# W$ u4 _# c( Y% K! ^</head>
+ b' N2 e+ V, p! M<body>
# Q! B; s% \! k* \5 ^" i<div id="pic">
8 B" f* F2 O$ }4 D1 @<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! h& h4 C5 L* k, ~' Q- S# Y9 U</div>
2 Z2 n# ], v0 [9 J- M/ _</body>
3 M, D. ?  j1 ]% l* D</html>




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