返回列表 发帖

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。9 F  ]7 Z" H) a
关键在于:max-width:780px;以及下面那行。4 k4 @7 G: [, @) R0 m" U
固定像素适应:
% F( ~0 H+ e8 m* W- L" _& N. I( a7 x9 C0 Y
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>  以下是引用片段:' d( T* z( G, A- ^5 Z0 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> $ x& K! h- D0 ?/ y
<html xmlns="http://www.w3.org/1999/xhtml";>
/ B8 N, A- \% W/ t& G<head>
, Z' O0 c6 H" K/ `9 c# ]* q9 j+ n<meta http-equiv="Content-Type" c />
" u9 Y: p) n  \6 W) K; b% R<title>css2.0 VS ie</title>
0 V  V; B3 C+ C, h8 Q<style type="text/css">
' q8 e9 x7 M# e! ?" v8 G( Z: m<!-- & y% a9 D3 J/ t  c
body { ) i# }! d6 F/ F" N
font-size: 12px;
( F5 D2 Y/ M* @text-align: center;
9 C  R: c% j0 T6 b* s8 \3 l: Bmargin: 0px;
+ Q  N3 i  G5 i! K8 D% r" V' cpadding: 0px;
, _0 B2 @5 B( p7 U4 r& `4 X}
1 l! y. T# p' q$ |3 c#pic{
2 Y) h) D% J) f, v+ _, w  margin:0 auto; 3 ~5 ]7 g) F" i0 ]
  width:800px;
, g# {7 q. Q8 y7 j9 I& A  padding:0;
. K' t; }4 H# @% V- f6 Q  border:1px solid #333; & B' q. O8 x6 ?& _
  } 1 @+ r  t! }& {: `" c2 Y9 h5 X. k
#pic img{
9 i0 K" H: N, }6 ~    max-width:780px;
6 s- A5 I9 X/ V7 u  b7 ~width:expression(document.body.clientWidth > 780? "780px": "auto" ); ! Q8 u; K: m+ l& O9 H
border:1px dashed #000; , D! }0 T( f  m
} " E; q4 a' N! r7 \. b. P
--> & k2 W5 v. t  ~
</style>
: l9 `5 X/ j5 v- [9 o</head>
1 z$ P$ p# s# l/ d+ u7 _" N<body>
2 z: w+ h& r6 E4 e" p: J<div id="pic"> 0 G3 W9 ?0 [, m! J
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 W/ O' @/ O; `. f3 j" v4 ]7 o1 a
</div>
# e! ?$ s/ f: s! K% u</body>
- Z0 R; y+ M  i9 L6 b! _& U8 b8 s</html> $ ~3 P, }' A1 A# g! E

0 n! r) t3 \  @7 p+ ^, ?4 ?1 @百分比适应:
7 k4 v3 y4 ]+ A& _以下是引用片段:0 i2 z( A  `+ z0 ]6 I( R7 l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 \5 M/ G8 p! \! x
<html xmlns="http://www.w3.org/1999/xhtml";> 7 L% X' \9 r, S; n- Z) j  A  X
<head>
9 M4 F' c: B7 I+ h- x  i3 y, O<meta http-equiv="Content-Type" c />
# p+ `3 h; F1 t4 \7 w4 Z/ ~  V+ P' p<title>css2.0 VS ie</title> 1 b; t2 t* A8 ]* f
<style type="text/css"> 0 f+ g$ l% w5 ?+ E  s! _! G2 z: n
<!--
" K; z$ P  \  m9 E  Qbody { 1 o7 i& {2 w$ T0 ]& y: K
font-size: 12px; + |+ T- }+ ^# h: C/ I
text-align: center;
9 l/ z' O6 J: n/ T2 Dmargin: 0px; ( j7 a  D) k  c
padding: 0px; 0 E2 r# B8 Q! p
}
& F4 |7 u: Q+ o5 D) q. g#pic{ - [  _+ K7 ^( z( v: x- j1 c& G! q
  margin:0 auto; 5 r) F! }3 e( U* f
  width:800px; 1 v6 U9 n( \) J7 T
  padding:0;
" `! D6 d9 M2 N  w$ M( K  border:1px solid #333; - p5 t1 R* g) q
  }
/ K' a0 @. z8 E1 |/ e* `' e/ D#pic img{
" I9 g( }! N2 a    max-width:780px; : o: k& S+ K3 q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 a$ n5 r5 u; u/ @) U. c
border:1px dashed #000; - K2 a) K+ ]/ U" y4 b3 I
}
  u0 D' X( P) j5 ~3 p+ d! R/ i. X--> 3 ]1 {) [- ~4 I3 F" v9 p3 Y0 ]
</style> % |" [2 I+ W; M( E$ }+ n4 L
</head>
' @1 a$ E' K6 u# V) P: r<body> ( x8 [8 f! E& L$ i+ o; ?
<div id="pic"> ( E) R  W4 m+ B" z) ]* x
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% m/ j& F4 w9 S# k" |; e+ ~, P3 Q</div> 5 y3 w* |( F) ]+ O1 r
</body>
! ]1 k$ C8 ^  a5 w</html>

返回列表
【捌玖网络】已经运行: