Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( V  D' O) ]8 U2 k; V" ^8 g7 e关键在于:max-width:780px;以及下面那行。$ `8 t7 Z" C2 i8 ?+ j# ^" x8 c
固定像素适应:
/ h! F- Q( ~7 |; N% N, h
; W" B% C0 L; s/ Ldotted; 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>  以下是引用片段:
8 }1 T% T7 ~! a) [- g  a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; m3 o3 b% T( Q  v; z" {) q! g
<html xmlns="http://www.w3.org/1999/xhtml";> # P3 ^5 d* b! V
<head>   I* Z1 n- ~5 I/ o) F3 |
<meta http-equiv="Content-Type" c /> % n3 w; n( c. H% d
<title>css2.0 VS ie</title>
# h- s! Y& {+ _: J$ e<style type="text/css">
8 R. R( v- l2 Z- a<!-- % H1 Q7 z$ N- G4 b  D
body { , w# q$ K* v5 l- C, F  h' H
font-size: 12px;
  Y3 Z+ d5 e8 P1 Q9 ftext-align: center; + c8 x* P* O& ^" T
margin: 0px; & {7 q  ~5 H  [' O7 q6 g5 v. K
padding: 0px;
  t& B& ?4 A0 T$ l0 k0 [: C} $ I/ X* T6 v# N
#pic{ 0 J0 L% e( V5 I3 Q7 O2 f
  margin:0 auto;
& c! W6 d  Q. d2 P" o; Y  width:800px;
) w5 x& ^; |  A9 D- t6 a; R  padding:0;
% Q* M8 r5 G9 x. ]  border:1px solid #333;
/ X7 ?2 }: l2 J2 j2 B* V  } : D8 P8 g) }2 u' c: z3 A
#pic img{ 7 q2 S; ~0 p$ T
    max-width:780px;
; |/ _; z, e+ ?: ~9 c. ?width:expression(document.body.clientWidth > 780? "780px": "auto" ); ; ?" o, g7 M- ^' h4 A) F/ h4 U' l
border:1px dashed #000;
: F$ x3 Q0 s+ n} : s9 Z5 n, o/ n' Z
-->
. E7 W( G; A' U+ Z2 ?! v) ]! x</style>
( M8 ], e1 i) k</head> ; {5 D* A! k' S# U0 q( c, U
<body>
& W7 ?7 ]: x% g0 z+ }9 m. }<div id="pic">
! y5 K) Z" j5 x& b8 B<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 z+ ~4 ]: J! r/ n# h: c
</div> $ a% ^: Z2 C  `4 i) j- I3 w, @
</body>
. q2 e& D7 T# o* c: |</html> : b: f+ Y$ j: W2 Z0 P% s
% l" M# W& l, f/ n+ k  _
百分比适应:8 Y" F4 R* I, I1 X' K) n$ T
以下是引用片段:% C) W# g" Q* Q8 u6 D  J  C* i5 `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ @7 X. K7 Y0 x1 B- u" \<html xmlns="http://www.w3.org/1999/xhtml";>
5 p( o1 g! `1 l5 N* X* X! N<head>
/ ^& b9 j$ k" i" K* v2 w<meta http-equiv="Content-Type" c />
+ o- P& r7 O" R! U( k<title>css2.0 VS ie</title> 4 {, G$ M4 }8 h  e) l: W
<style type="text/css"> 8 f2 h" f! |7 E; d% U- O. |
<!--
5 n8 K6 C8 K+ \6 b# A4 Ibody {
; p& A2 `+ s3 Vfont-size: 12px;
% R/ m$ x* ^5 ztext-align: center;
  I% I: |2 [1 E3 o! vmargin: 0px; 4 l+ _2 K/ s: @- p5 s
padding: 0px; ) Y/ m9 n  ^& i, T& ~
} 9 C/ j1 w$ V" P( h1 y- c# ?
#pic{ ; e5 o( N& C  |! @
  margin:0 auto;
* B3 x, x1 x2 F4 Y4 m. K  width:800px;
+ {. C1 r% k" ^" I  {  padding:0;
' x% h% a: E: {/ w; |, Q: z  border:1px solid #333;
4 S+ u; @$ e8 C& R; F( ]' q) O  }
# f, u7 }0 W) c- ^% v' v' B: O#pic img{ 4 [0 x, ^' U  g8 u0 q
    max-width:780px; " W, h( {- m- G5 A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
# q3 A& s0 K0 q# h- mborder:1px dashed #000; 5 t1 t/ Y. o  b  {: X0 r' w/ T& ~, H1 E
} . D$ ?' F* n/ S
--> : u8 B/ X3 I- ]4 X' N& }
</style> 0 |# \2 |4 D! v0 D: j$ G
</head> 6 Y8 w$ g; X; Q
<body>
, Z3 U% v  q* Z<div id="pic">
& Y" P" z6 z- Z' W9 O<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # |9 v$ d, c7 C% F1 `0 S4 G1 T
</div> . _6 c+ @: B6 g% V4 R7 s' m1 S2 [
</body>
' O1 C2 g3 H% [6 V/ g; [* |' o5 e! k</html>




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