Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 U4 A+ e8 `9 ?( {' z# E关键在于:max-width:780px;以及下面那行。7 n  s% D2 Y7 x0 @! g+ S4 Z
固定像素适应:
: F. p5 P+ H- n& B+ D/ h6 W
( X* Y2 k; s: e  J# G9 @6 qdotted; 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>  以下是引用片段:6 W- i. x. |+ a: g' _) j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& Y* \" H7 ]/ L3 G: f. n<html xmlns="http://www.w3.org/1999/xhtml";>
% m$ Q! t) ]/ G1 S<head>
; U2 U$ n  G+ Q8 F: Q+ z<meta http-equiv="Content-Type" c />
: P" n. S3 [' E& u- q<title>css2.0 VS ie</title> 0 k3 Z6 H3 b8 {& a5 C3 e
<style type="text/css">
$ k! @1 H- }9 @8 A0 r: K/ _6 ^<!-- 9 K. f1 G7 D- u
body { ; H9 k+ l1 @5 _2 }4 l4 Q
font-size: 12px;
# f  h* w  U( f. u) J- rtext-align: center; 3 g, I$ W7 b" q% `+ H' d
margin: 0px;
5 @: @& A1 J8 O. x& f/ Ypadding: 0px; * Y% }: X' I2 r& y9 j
} / s" _5 [0 \9 J( c3 h  f
#pic{ ! ]8 e/ ?6 I$ G3 h. b  f
  margin:0 auto; ; G; {# K( j6 \9 @% z/ i
  width:800px; ) [5 d) m8 K/ c$ v$ q  \' f
  padding:0;
  ~. }  H$ M7 h6 }0 O' L9 J* P/ l  border:1px solid #333; 7 G$ O; |7 ]6 e: {& B2 }2 ?
  }
2 M& |) H! @9 t" M0 S! z- i" J#pic img{
$ w6 M; F$ X  C, e7 E! `    max-width:780px; 3 U5 s. A' ]' s- I2 `# T: P
width:expression(document.body.clientWidth > 780? "780px": "auto" ); , w( A6 ^/ ^% e8 m$ B/ T
border:1px dashed #000;
0 g, a& z6 ^% L0 r}
. g! R! ]) i0 A--> ( [# V, X! }/ ]5 R# Q
</style> , ^+ @" V( H( Y# G( J* f. E" n! Y
</head>
% V" [0 a$ Q3 O* y0 s<body> * |. c& b7 c' e8 ^# a
<div id="pic"> & Z0 J8 {' g; p/ L2 p$ a) |
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> + I2 |: c$ @, r2 e- `* t) N
</div>
+ A# B3 w( N9 Q0 D! U& N# m7 N</body> 9 J/ }" Z3 i( C9 Z0 ^/ u
</html> ! I# ~6 V" S! M4 u
. b5 F1 I/ P; D2 R5 I% X
百分比适应:  M! K* S, L+ @
以下是引用片段:5 J$ L. ^+ `" K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 ?% y9 i" @/ R& N+ R
<html xmlns="http://www.w3.org/1999/xhtml";> 4 s& Q6 H3 J* F3 p$ f1 y4 a
<head>
0 g6 D0 ^9 Q" n7 \<meta http-equiv="Content-Type" c /> ) E2 N+ v' U/ O$ S9 y
<title>css2.0 VS ie</title> $ A; G- X8 m' P6 i) I$ k& o
<style type="text/css">
! R2 I2 `" J: K<!--
1 g. O% g5 ^* G9 x! xbody {
6 X- \8 F) R& K7 P# @font-size: 12px; 4 p1 [" X5 s: X: H0 V# R
text-align: center; 1 A/ \* w) Q2 I4 |* ~4 z
margin: 0px;
& l9 J, F% ~. P% w0 j3 Hpadding: 0px; 9 L6 K6 F# K, ]9 |
}
1 x3 Q, v( w, n5 M#pic{
% r! B' U- u1 u. t/ v) \% }( q0 Q  margin:0 auto; / P6 Q; D+ P5 ^7 M
  width:800px;
. ~& U" g1 D. x  padding:0;
' @' q; ~3 Y+ b8 _$ S  border:1px solid #333; & B! P4 g0 o: M1 q
  }
8 ?2 E" n& \! E) C$ e1 d" Z#pic img{ / |. H3 R! ~. K$ G3 g2 k% [. e  c
    max-width:780px; 5 I6 R1 {; ^0 Y7 o" _2 ^4 x
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, O. `5 r* p2 iborder:1px dashed #000;
1 _3 P8 \2 J2 [& x: X# b}
) N: ?4 c$ }; y% x--> - H: \1 \6 s# [+ j
</style> * l8 a3 i8 W! L( e
</head>
# P1 D3 o3 \/ L  T' ~+ T& k) H9 e. X<body> 7 J4 \1 E- r& E0 k5 Q2 m7 P3 B
<div id="pic">
% C8 k! i/ i7 l! U3 F: Y+ j; A<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
- V3 O, R5 J2 f1 W8 b  D</div> ! l8 \) P6 m. {( v6 t
</body> * S% s# N; O  T- N( p, ?/ f8 ?# u
</html>




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