Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. m& {# @& ^" r* w0 t4 w
关键在于:max-width:780px;以及下面那行。
7 y7 q- S2 \* I  J1 `9 h. ^固定像素适应:
6 [' F& k- [$ p
9 ^+ ]4 E; h! Y4 }0 a; l1 Ydotted; 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>  以下是引用片段:1 h. Z" O# D% [) _, a9 T* X4 q9 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * r( p1 n4 f/ \
<html xmlns="http://www.w3.org/1999/xhtml";>
: p% d! x  `$ J<head> 3 ?- G$ \- D1 S" ?3 S4 X
<meta http-equiv="Content-Type" c /> 7 G! H, I: i6 C% n
<title>css2.0 VS ie</title> 7 P' j9 m# }9 ~& E6 `+ w' |; m
<style type="text/css">
4 w& ]+ e) o% w5 T<!--
" ]3 P4 }' w; O) e8 e. v. k! Rbody {
+ V; C! z' ~) D# pfont-size: 12px;
1 }5 X3 h" ?' K  O5 Otext-align: center; 7 y  i' l- p1 h# d# s
margin: 0px;
6 o! l$ t0 C1 _, P5 Upadding: 0px;
/ ?3 M& E' }5 G! V! @) U/ y} 5 @- P3 H' T9 y( S2 y, }
#pic{
2 r  C' l/ [5 G* ]  margin:0 auto;
; z/ n, k0 f9 x6 A  width:800px; . |" ?5 k  }& D
  padding:0; 9 T1 B' {7 u1 K9 T0 ]% X
  border:1px solid #333; 6 i! F) w+ i3 \3 i$ ~5 U0 r
  }
3 V# k, H3 P: u. E! X8 \#pic img{
! p  n% d: l. f6 m* ^    max-width:780px; 2 a1 ~3 K& A$ _, p6 F3 j! W
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% ]1 ]6 e+ @/ R% ^: @border:1px dashed #000; ; ~4 S3 F# l7 c. n
} ) m& H4 F$ D7 a  L
--> ' V  p! z3 y- U2 f6 _4 H+ t2 v/ j, I
</style>
6 v1 n3 o. U' l9 P$ ]" l</head> / ?- [: U8 T4 S
<body>
. M8 N! e% t& k0 `4 t0 l<div id="pic"> 2 y2 p! E& g  ]- o
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! Z8 ?0 Q! j' C) x( \6 O
</div> 8 U, P$ c! e, U8 x
</body> # r0 V7 A+ J7 \
</html>
, ^7 V0 |1 W4 r2 {  N& j" \/ R
! G  a' {5 c/ O6 Q百分比适应:, D' g# Z7 q! t8 r) I1 K
以下是引用片段:
( R% J5 l! Q- g: j0 b( `1 z' d) a6 Q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: c, @# s  X/ p* ?' z9 g, s4 ]<html xmlns="http://www.w3.org/1999/xhtml";> : C! W* u9 `( g& `4 p- @' \
<head> ! }, b, V( R+ W/ Z' g' `
<meta http-equiv="Content-Type" c />
, ]0 x- e& q8 l<title>css2.0 VS ie</title> - D* c. f/ R2 ]
<style type="text/css">
' W7 E/ `0 I7 a' l6 C- S<!--
$ I5 v1 A6 T% v. dbody {
+ N5 F4 H6 ^4 X/ [( u  Mfont-size: 12px;
  [$ V! H0 U; s9 Q1 Utext-align: center;
; j/ g  o3 U) A4 _4 h5 U6 d4 _$ kmargin: 0px; 2 i8 i" h2 c7 `9 w6 p" [) A
padding: 0px; ; G) A( K2 B  y& C1 @+ \0 M( Y# y
} " J* H# B0 |. N% L
#pic{
8 T; L% h( S" O* G  margin:0 auto;
% U! p7 R' P0 W. t; `& G  width:800px;
6 \3 @* O1 }) U: i9 w+ ?* _  padding:0; & j/ N9 I% n) r- c
  border:1px solid #333; ; u& R( G5 L/ H
  } - D! }1 H& `( W4 \
#pic img{ 9 R8 ~. d- z0 u! Y1 a
    max-width:780px; 9 v/ u$ n; D# Q  N7 g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( c# ?& Z8 _( [! \( gborder:1px dashed #000;
" w( j) M1 y! V1 _2 ~}
$ u  u! I: @1 M5 A-->
" ~" @9 J6 J) |4 }9 J</style> 6 L, B( q$ t/ @* Z- ^& f) q
</head>   d% E$ U1 w: u
<body> : |4 J5 D# I( A0 f, r5 F  M& X
<div id="pic">
, U9 [# n" ^: }  ^9 ?0 a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 a" t( L; F# Z" E, W, u+ `
</div>
7 p- U. @- V9 F6 n0 R( V</body> " F1 e* }; T9 }% x& X4 k$ e
</html>




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