Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- D. d: J5 P. L" e# e关键在于:max-width:780px;以及下面那行。9 e8 Y3 C5 n( u& D
固定像素适应:
, [7 c) P* e9 G. k& F: ~. U+ x& V3 P2 g$ q( ^2 S
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>  以下是引用片段:
( x7 V. T# e( D7 l% r<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. @# P% C: C: x8 [2 F5 k& n( w<html xmlns="http://www.w3.org/1999/xhtml";>
$ z) B' m. d4 r+ e* w( {4 l7 P2 w% h<head>
) ^( n. T  ^8 d<meta http-equiv="Content-Type" c />
/ I3 v# c# q' }6 `# W7 B& c6 D<title>css2.0 VS ie</title> 5 V; c1 `/ z0 z' N1 z5 ^
<style type="text/css"> * c0 M& s- K6 Q5 Q5 f
<!--
; V+ D* C9 L0 d% Q. jbody { , k9 A5 \, R9 H1 z+ t1 E  B/ m
font-size: 12px;
* ^  i$ M( n9 ]& _& R% @7 ztext-align: center;
1 c1 t9 \) L  n4 u( }  K8 F# ~margin: 0px;
# Y9 }2 d  I' i3 Z( _7 Zpadding: 0px; 1 P# I; V' q( T2 [4 Y
}
: N% Q7 W' D2 A2 ?2 {' t3 V#pic{ ' \6 i5 q" d& _" d. M5 C
  margin:0 auto;
6 Q) S" z' }6 G1 O( A7 D/ f/ K  width:800px;
! _2 Z) M: k( Y  s  v3 ?" l4 G  padding:0;
" g3 {. ]; J) b9 r; \( P  border:1px solid #333;
( |% S- I- ^+ k% J! R3 s! U" S  } $ Q- C% R; ^+ {  w1 r% ?6 r. n- s3 h
#pic img{ " Y9 A2 q7 l' k; S
    max-width:780px; 4 J/ X7 f  a5 u. T2 ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( M, N  U0 m4 u, Xborder:1px dashed #000; 7 _1 V* J. _# ]- t
}
5 d8 H" u2 z' X3 j  N9 Y5 S-->
. E7 y! w* A9 e! w! u  s</style>
# a7 `5 N+ U4 O. f7 B0 u1 V" |2 N</head>
; F* f  i$ j; u9 ^+ f! \<body> * E6 Q% I, A2 l1 y
<div id="pic">
$ x0 t  f. h" y( G: S7 e: f5 ~0 T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ ?* f! B  y4 P* \7 A
</div>
& H* A) o, `' l1 Q+ M# O- A</body>
7 J+ B+ W  e$ q</html>
7 x3 L9 m" F( u
3 S' E6 O# W! W: a百分比适应:
* d6 O9 _, g7 F, n( r1 P以下是引用片段:
9 S$ v' O5 x$ w4 o3 _! a) c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " n. u2 |& d& ?. x
<html xmlns="http://www.w3.org/1999/xhtml";>
% d8 B/ X, }  i% e; p$ S<head>
2 \9 k% T% N) d* \<meta http-equiv="Content-Type" c /> 0 W6 f. _3 K4 N5 }) _
<title>css2.0 VS ie</title> 7 J! m. ]1 k5 a" {
<style type="text/css">
  }1 k  ?% m# v! K6 w* r<!--
/ r2 r6 Q% a# {. y0 U& cbody {
/ U$ i8 I5 f0 w- T4 t, D. m! Mfont-size: 12px;
8 f% Q: e  i' `+ E: f( v9 @& Q& etext-align: center; 7 m3 q9 ^& U7 |" `: D( I
margin: 0px;
" D* S* f% ?1 f+ U* t( Fpadding: 0px;
: z5 L( P6 `% S& W2 D} & k8 Y3 z5 z2 A1 h5 E
#pic{
' Z* `6 G! R4 G1 r  margin:0 auto;
7 u6 @, {, q3 k" j6 V  width:800px;
6 h# P, C2 Z' o9 N9 {" I  padding:0; - Z. V3 {6 N; I# [. O! [6 X
  border:1px solid #333; 5 ^" Q# J  C& c- z& K# a) H
  } - f6 ~8 k3 U! G9 Q
#pic img{
- h1 o) H  j  d; j" T7 U    max-width:780px;
$ Y: g- j- o# Y* `& vwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 5 H& ]1 e: N/ ^% H: L
border:1px dashed #000;
/ C: x5 G* ^2 m4 E}
3 F& ?9 h' t/ I7 A--> 5 V) d" d$ J' ?2 l' t& h% F
</style> ' J# Y0 Y# _2 X7 _/ R7 o* }
</head>
: n/ M8 Z; w. t5 g8 d<body> 0 U0 n* b) B9 s0 `/ u" B+ q7 P
<div id="pic">
# j$ P' O- W  v1 f0 ~' \0 q* a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( `6 T1 T, ?5 T& o' U5 B5 u
</div> 5 k: |4 R) s( Q% o# Q8 y
</body> + z7 ]( f0 z( d+ N9 l6 U3 @
</html>




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