Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 X: H: C: _% K7 ^6 t
关键在于:max-width:780px;以及下面那行。
  d, K7 }' h7 q固定像素适应:
1 a  r4 T  w  j, s7 K! x$ _
8 C% K* _0 G4 w/ s( G4 X" x1 l3 }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>  以下是引用片段:
! \. J% u/ C2 l5 g2 i, r6 D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 d9 [9 H: A" E
<html xmlns="http://www.w3.org/1999/xhtml";> ( Q" V- g3 E8 I9 H  K, z8 k
<head> $ f' c& x( j) r
<meta http-equiv="Content-Type" c /> ( t; A% m5 I# z
<title>css2.0 VS ie</title>
; A; c  Y, G+ Y! [<style type="text/css"> + c& o  g* c( C$ ?4 Q
<!--
9 `8 [" ~# S/ W; P$ z' j- G8 Mbody {
; r$ r9 V2 d9 I# n3 v2 U7 n$ G' ufont-size: 12px; & T5 I# L, J6 [
text-align: center;
- r: h. ]0 I  g4 Imargin: 0px;
/ P! o% T7 O& ^' Epadding: 0px;
) ^( y" V; u; I5 A4 i} ; @" t8 w0 w4 j$ T
#pic{
" w3 ?+ \- I  J9 A% i5 C8 o' O8 I$ Y  margin:0 auto;
: v' J0 M( r+ ~& I  width:800px;
! L$ U7 S! V7 ]  d5 e: {8 }  padding:0; ) E  b: Z8 z! I* F& C2 D
  border:1px solid #333; + A2 [+ Y$ r# b0 L
  }
9 e! ]' _! r* r0 y- r#pic img{
# @( B5 X" @3 w! s+ ?    max-width:780px; ' W" _4 D6 e' t! l7 j
width:expression(document.body.clientWidth > 780? "780px": "auto" ); # e$ ?) D, @4 Q# G4 F+ b& m& a
border:1px dashed #000; - |( A! B4 K: r! k* D
}
3 Z. T6 Y5 X- S. n& i' B-->
9 ~" N7 @% |: D3 Y  G</style>
* p* \8 H" N9 @2 W</head>   u) m. ^# n4 w- Q# r
<body>
# L' K% {" ^: z5 A: Y' Y& a<div id="pic"> ; E( V9 i' y8 c+ ^8 g6 `3 Z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
& w2 N% D0 {0 q9 C</div> 1 `. j0 }' ?: N0 M# a+ h
</body>
. k8 G1 I. V; |</html>
  U1 K- H+ E# V) I/ p. [* q
% p' O; u$ N* K/ C# ^百分比适应:
% L7 p2 R  B0 N0 z以下是引用片段:- {9 j0 c& E2 s8 l8 W6 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + L3 B  Q$ b0 N6 a
<html xmlns="http://www.w3.org/1999/xhtml";>
6 M$ c" j- K& o+ x1 u<head>
* d9 B3 u% r, M- W% h/ R* \2 c<meta http-equiv="Content-Type" c />
' I1 B! E) [# ]% r! \- }) H* G<title>css2.0 VS ie</title> ) |1 x1 v2 M5 K
<style type="text/css"> . T0 ]7 M7 \9 w1 E  a0 y1 t' a
<!--
' }- q% y) H% s/ G2 O2 }6 Pbody { ) R9 C% F- X) s/ `
font-size: 12px;
: k" }) f  k1 n( V' f8 c8 T' |text-align: center; ! l6 [, @& Q( w2 M5 G+ N  |
margin: 0px; ! p* a! x; \/ n3 ~8 I1 b
padding: 0px;
( x) ?" ?( G: C. |}
6 k& [* @' G: Z; n7 O#pic{
+ i" m3 X9 X3 |, H$ v$ |% |8 U  margin:0 auto;   r: }# K% e4 D8 W
  width:800px;
) r6 m4 k. }* O+ t& v3 |2 S  padding:0;
8 `2 k) C. L! B' C6 m6 w  J  border:1px solid #333;
; f! j- n8 X3 p8 F/ O- X! V6 g0 H  } / `* O" Z" o. x! w* C
#pic img{
- I: G  A: ~) r; f& T0 S8 p. v0 f    max-width:780px;
7 x5 R. N& q& l- b4 Q% |width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); # T, y; ~1 K; g
border:1px dashed #000; 5 u" S; v: v! A4 \7 {! N
} 2 |+ ^- _% ^  g' ]
--> ) h7 n, r( m% S4 Z- ~
</style> 4 e" V, n9 v  b& E
</head> 5 ?# g0 t5 E: T1 L& A
<body> + g' j4 k( i8 T% ~  k3 |
<div id="pic">
" j7 t7 x/ r) \9 ~7 I<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
0 n! ~& ^0 d( f$ E/ q</div> $ R* L- |( q6 v$ u  {/ d, e
</body> 8 t6 T. L/ S2 p
</html>




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