Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 J$ j, D1 @$ N! n) C
关键在于:max-width:780px;以及下面那行。1 b- E/ `' s0 ^/ c6 K
固定像素适应:1 Q6 g* B: a5 T4 _6 A; T

% q+ A3 V; G# p# }5 d: Odotted; 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>  以下是引用片段:
$ G4 g5 A% I* E! w4 U& a$ L<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ! ?7 g4 w( B* i
<html xmlns="http://www.w3.org/1999/xhtml";>
( N( s9 Z6 S' `8 ~1 N<head>
3 W8 _) o0 d+ x: D<meta http-equiv="Content-Type" c />
5 j1 Y5 Y3 d9 s2 R* s0 B1 I/ n<title>css2.0 VS ie</title> 0 i# I! x7 }% S. n
<style type="text/css">
. u  }, Z4 ~6 l) \<!-- 6 U7 \7 N' s$ L. J" L8 I2 B
body {
& Y* x( e. T' c; g2 Hfont-size: 12px; & T- y& t! O# e' N. U; Q% t
text-align: center;
& N# v8 G# A3 B4 q" n9 `% Hmargin: 0px; 0 C  g2 s1 D$ C
padding: 0px; & l9 P; G4 ?- I( W- n! E) r7 s
}
2 A' D  U% B, \; u& U* v6 r: s' ^#pic{
+ z# h' R6 N6 {1 r4 F- D% u  margin:0 auto;
$ U8 z8 o9 C/ X* y9 T- K- k0 H- {/ @  width:800px;
/ Y: g" C. o& v* `2 X6 P" X5 w* X  padding:0;
) h3 H5 I  K/ ]4 v  border:1px solid #333;
- T1 k  N" D6 I8 i  }
4 _' s4 I: Z* W6 D2 T+ E/ \7 N) ^#pic img{
; h' G+ @1 W7 d  r    max-width:780px; & o( |. F# \9 j5 Z. x/ }( g
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 \9 Z  u6 E: z2 |" e0 O( x2 Y- ?border:1px dashed #000;
( v' q5 R1 Z4 t} ( y& u/ M% Q* z9 A0 t% f+ X
-->
; `) E6 {7 d! S3 C+ k</style>
7 M2 f) T6 z8 A</head> 3 G) x" w0 ~/ T
<body>
% K9 c: M" l' w/ n5 p<div id="pic"> 3 Z5 K7 w7 a) |1 {+ R+ p$ Q0 k
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) }6 G0 x, g/ u$ ?0 Z; y: N0 ^" |! P
</div>
9 G8 n! Y2 O4 v3 s( v' v. Q# E</body> . S- ~* R; g+ Y( `8 M
</html> ; @+ K& s' ~' p) i" D  w
& [9 E5 a& A1 r. a( S
百分比适应:
9 I' ]$ h5 \- G5 r以下是引用片段:8 A, I( f& e0 V1 V+ E$ _$ Q* Z. z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- q4 d: r: c. {0 [% F) j4 d2 n4 X<html xmlns="http://www.w3.org/1999/xhtml";>
/ V' ^6 P2 i7 O) K# a7 Q+ \1 u<head>
, O9 n- s6 j7 f7 O# {( Z8 M* a) J<meta http-equiv="Content-Type" c /> * \" V1 m% }1 U, c9 G- P; l
<title>css2.0 VS ie</title>
8 G5 c" E" O' u- @6 O6 }& r- t/ m5 h<style type="text/css"> $ {- A) L/ A3 _  Z  ^2 W' [3 i. N+ k
<!--
* H7 N8 c# _2 a/ b1 tbody { $ C- }4 m/ h2 ]3 O8 i7 a
font-size: 12px; 5 O9 g% C2 v& F+ Y" {" i% u5 ^
text-align: center;
. \+ q! ~0 ^( cmargin: 0px;
. o3 ~/ Z% s# u2 spadding: 0px; ! o. z& l/ g7 ?$ u- ^$ @! U, D
}
& p& p# W/ y7 t) j$ Y& E4 D! q0 P; m#pic{ 9 t# W0 J& J5 [) f  F
  margin:0 auto; 1 M7 l! @+ f, S2 d  m4 j
  width:800px;
. ]6 C8 J1 c  a( F1 E7 c/ N  padding:0;
( A, k7 D5 L2 @, D; ~2 M  border:1px solid #333;
+ c+ g; L6 E3 A+ G  s4 q3 J  }
3 n% @9 H# A$ N8 k! w#pic img{
: B# J- P9 X7 [- k& q& Q2 o# g    max-width:780px;
4 o7 b3 P" o" S, vwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& X: ]' \* m7 Mborder:1px dashed #000; ' N  d$ X. d/ L8 K, Y
} : Y1 `& [* R+ P/ U
-->
: Z$ b  M/ X: t</style> ) i. m& t& P: Y
</head> , L; R9 |; q4 h3 p
<body> 8 B# \- ~3 |6 B# L/ t* ]4 X' q1 t
<div id="pic">
' K; c2 b0 f/ E! d" p  O2 J% _<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' F, u6 O* y/ |) y5 \7 k
</div>
  n8 s+ j7 O( H+ k& A) E  V  l  L</body>
  [2 R; c  }% k% n- {+ F2 T</html>




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