Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 n7 E+ S4 a7 j( F. z, {. M关键在于:max-width:780px;以及下面那行。
8 v; Y  K9 a& l5 R固定像素适应:
8 G' ?$ f2 v9 ~% ]. Z6 Q
' M" R1 o4 u' gdotted; 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>  以下是引用片段:$ i6 R: ?, j, @! i# J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
  e" {9 f2 d+ |+ M$ t0 P! ?<html xmlns="http://www.w3.org/1999/xhtml";>
& `9 c4 k  Y0 n& `# n# {<head> + Q7 B* c! ~" @; r
<meta http-equiv="Content-Type" c /> , |3 ]6 N) F8 X/ q' j
<title>css2.0 VS ie</title> : i6 C! _9 w: `5 s1 h# y4 ~3 ?6 Y
<style type="text/css"> ) |6 t$ T# @( ~
<!--
  L0 g$ F6 e. Q, Q; Wbody {
( V' C: y8 _; {1 d& pfont-size: 12px; 4 Q  z8 K6 W$ M+ g% ?) d8 n
text-align: center;
! B+ ]4 @1 M! h7 g/ y! xmargin: 0px;
7 J: L& B4 ^1 Bpadding: 0px;
( k% _* U0 _$ }3 O} 2 N9 i- P5 k& Y9 I
#pic{
0 O' E# r# H" T6 c' Z  margin:0 auto;
/ |; e8 M; Y. l# J1 y" V$ z, l& l% F% x  width:800px;
. t) h& ?) i$ J; G/ _3 o. W5 s0 [  padding:0;
5 y# W1 O- C& L9 B$ c" \5 Y  border:1px solid #333;
+ a& {5 t8 B5 T  } / I& s# v/ \0 D# |2 h
#pic img{
5 S" p9 D' y1 t    max-width:780px;
( H6 P' D- f& L; b) qwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
, u, {) q9 C/ P7 eborder:1px dashed #000;
7 a1 O% E+ T) _+ H/ }/ K2 h  I  ~} 8 d* E' H/ H! N* M0 L
--> ! F; Q9 h4 d6 a) }+ q6 E) `
</style>
) g% F, d  ~, s3 j</head> ! N6 P7 f: h( d. T2 |  S
<body>
1 d0 c7 z* Y. b, _, E<div id="pic"> 7 F0 Q+ G5 U* I5 r5 g# O  H
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, S1 w1 e: P1 ?( s# V</div> / r; c3 g; ^6 {, T
</body> & C# r1 R4 }3 P% E
</html>
* Z( D& K) ~) L  A2 o% ]6 p8 ^
- O) B) ]& m, Y2 z# b百分比适应:
1 T) C3 ^+ _5 Q, Z/ p" s$ [7 x以下是引用片段:
) o" f# m1 `# ~# N<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : D$ n4 f6 n, F. X) B1 |
<html xmlns="http://www.w3.org/1999/xhtml";> 4 l; K  z" `) o5 h
<head>
- D! Y  G! H% ?2 Z& Y/ P<meta http-equiv="Content-Type" c /> 4 n/ [$ v, l, e8 T
<title>css2.0 VS ie</title> . K% Q1 P3 ^/ U/ x
<style type="text/css"> * P* Z; y6 J! H, K( x1 o# }
<!-- 5 ]% \+ w$ U" t
body {   T( f6 K( L# H3 {% s, @6 N3 K
font-size: 12px; % ^: h& F& p: D$ I' [! I0 r
text-align: center; " h6 V0 F& Y0 d3 `/ h6 a$ @
margin: 0px;
- d& S6 h+ ]9 u2 X8 c$ `padding: 0px;
% q% @, \# u, t}
1 S# e; h7 T! f- L. |# |) ~- z9 a#pic{
% ]  I% \" L+ F! S1 a  margin:0 auto; # s7 W, M0 c6 S) G. |; Y0 }" H: D
  width:800px; . ]) B$ Q2 O$ \& u
  padding:0;
2 D. I, T- f6 A  border:1px solid #333; & |! n/ K/ J4 E. Z$ T/ g! V
  } 5 m: x2 N) K5 @+ Q. `
#pic img{ 6 O6 H& }8 o4 q+ [. ^7 ^
    max-width:780px; 1 q6 c+ s( x' \* [0 `+ {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 w0 E- s# D( A9 d7 K, Aborder:1px dashed #000;
- u* a3 {* k0 v/ Z" [+ F# {) F- f* b}
  Y/ V) B( |$ J7 }* U5 H--> 8 i' \0 }: R% E# M$ D2 {. W
</style> % n0 g- |8 o4 H' g. U4 C0 B% |
</head>
! W* M2 V( o& N5 e3 z) f<body> 6 m/ O; F" w  \& {
<div id="pic"> 8 P  N, K5 I3 W. S. E' X
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 q2 n9 c/ y& d7 E9 d  D</div> , x* T( h5 y6 c* `1 F
</body>
" i7 j& s) ]6 F" Z4 k</html>




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