Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 f) v! A  [2 \关键在于:max-width:780px;以及下面那行。  r& s! U8 F& X7 Q. z
固定像素适应:- o! O. u1 c5 ^7 b, f
* M7 _6 h  E: Y! G. M
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>  以下是引用片段:3 f3 \) X9 B; V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 0 l4 K- v" b* r1 o( Z* _
<html xmlns="http://www.w3.org/1999/xhtml";>
' k) }$ t1 q) F" b<head> ; Q7 l& q; B, T
<meta http-equiv="Content-Type" c /> 9 a4 E" X3 n  c) f' z1 A" j/ _
<title>css2.0 VS ie</title>
  c! w& v2 }2 N* v6 b6 K1 j<style type="text/css"> + P( L* M* ?9 i$ y6 U0 v/ d
<!-- ( w7 j7 B! E% H# o2 S8 w
body { ; M5 d$ Z" P6 B& V8 y5 B! @# _2 J
font-size: 12px; - E, x% H* O; r# W3 {3 Z, {
text-align: center;
+ H, ~% N% U- W! h+ d2 qmargin: 0px;
5 r6 a$ p6 c$ m8 opadding: 0px; 0 I/ n$ G& X3 x5 @7 f; A/ U/ o9 s
} ) H1 t8 }% G  {2 S! Y) N
#pic{
5 z. ?, H) L, z1 t$ u% K5 w, K  margin:0 auto;
) b: W" E( [. ^8 l  width:800px; ; a9 Z" K+ e8 ^+ A
  padding:0; , b  t# Y8 r! h# U0 y8 Y% @/ s
  border:1px solid #333;
# Q0 G8 r5 _0 ?/ e  } ; k% c1 L& A3 i$ g, J
#pic img{ + Y# p1 D8 J  f0 J; F+ N
    max-width:780px; # D7 X) v( J  R! Y
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ( j% ?1 e. Z& M4 a5 \) D7 [
border:1px dashed #000; 4 F( E* t/ \# q6 |4 q
}
: b3 E! v1 E, x# y+ k. j% u-->
: i; b% L1 }5 G( _4 F8 M+ [</style> 6 x. ~( @+ @) q) Y; U
</head>
* @4 Z! V* b- k) F" r' D" e<body>
. D  _% T3 }: B& @& r( |+ f; W7 p; P<div id="pic">
; {0 O* C/ |- r" c) H' j<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
9 }9 a  l" x! ]</div>
0 n8 x9 n1 i; K9 J+ n</body>
2 S9 X8 d  l3 }2 J6 m</html> , t# p! N* I" r9 h9 A* `
, ~3 z! N% |/ Y; |1 n! I
百分比适应:
2 X0 T7 o, ~& b1 \+ L以下是引用片段:0 v) A5 n# X3 i4 q1 F, [7 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 Z$ d* e+ U9 p0 d# Z3 v<html xmlns="http://www.w3.org/1999/xhtml";>
8 ]% U: t7 @% ?<head>
: N8 i) s2 g3 r9 E  Q% A<meta http-equiv="Content-Type" c />
# |$ L' j2 F/ g9 Y, Y<title>css2.0 VS ie</title>
+ m% T5 L% D4 I6 e4 _, O0 G<style type="text/css"> # n8 u  [: u% ~& W' {
<!--
5 V+ D0 }; V0 Z9 A; lbody { 5 A5 T4 T# o$ h- }' H0 H! w6 ~
font-size: 12px; # K3 J9 O! E7 J
text-align: center; / i6 `4 H9 ?* \6 d. @
margin: 0px;
% T. `( g6 A( f% \. Mpadding: 0px; 1 U4 Y/ j/ q4 l' G" V" h( i
} 4 S; a6 d1 V, m8 U6 n: i
#pic{
; t* }; p) b% v/ A  margin:0 auto;
8 s8 y! W- e; g$ O9 l  width:800px; 7 X1 A7 d3 z' ^- h8 S9 t: Y# q
  padding:0; * ]8 G, S' O( t& t- A. O
  border:1px solid #333; ; V% P1 O3 ]1 ~: `
  } / ?8 M. F) m# q3 o
#pic img{
- N& w) |2 S1 L1 i! x    max-width:780px; ( u! T! ]; }& N# I
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 S0 D: W5 ~: z
border:1px dashed #000; 4 a" J+ o  E; ^$ L5 H; |
}
5 J  k3 h( l, j-->
6 S# _) |- M# k+ B! g</style> 2 C" T  S$ e9 t2 I  E7 p) h
</head> 3 r' y, ^; D* O) x5 \5 ~
<body> * D" l1 y" i( m; l2 T
<div id="pic">
5 u' V$ A1 y- q0 d1 b9 k<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
. }6 M9 `" @) P0 ?4 i% |</div> 4 A5 u, m' \: I4 M6 ]
</body> + _* q$ l! l0 {/ ~( F6 P- w
</html>




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