Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。+ R0 v' h& @& b: @5 g; I
关键在于:max-width:780px;以及下面那行。
& f% o. L% ?9 R) [+ p, S$ N4 |: X2 x固定像素适应:8 L! B$ L. Q% c, j0 r
2 B7 z; O0 g" \! h- M3 O
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>  以下是引用片段:1 v$ c' P/ f1 _; A6 v. P; b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% [9 B- h; K3 R9 G0 l  Q1 x+ c! f<html xmlns="http://www.w3.org/1999/xhtml";> 5 T; L* |1 J- P' |
<head>
2 M- A" B* V( u2 g" `( |<meta http-equiv="Content-Type" c /> 9 ^  @2 r1 y& m3 M! |  Q
<title>css2.0 VS ie</title> ! ~. N# u- v. H0 `0 U$ I) W1 U9 [
<style type="text/css"> 4 V  F) k1 I7 s- ^: n
<!--
" k' m8 t, i9 }) v; ~7 ^3 s( _body {
% w/ o, w: W1 q8 _3 j+ Lfont-size: 12px; : B7 q- W% [' V3 w/ C0 }  A# I
text-align: center;
2 w0 `& f0 N9 _3 y* s1 lmargin: 0px; 4 y2 h# A9 P7 X" K# r
padding: 0px;
# t+ h( D. ^: m* A} ! P; |' x: X6 {7 X3 v
#pic{ ) a8 g; w( M& d
  margin:0 auto;
' ?; h3 f  \2 h  width:800px;
+ j/ h+ V: ]4 X  padding:0; 0 R' ]  h. C) U% S8 I0 P
  border:1px solid #333; / I2 n+ \! S/ o1 b
  } ( Q. R% j3 n! g' r/ p5 D' j) a0 Z
#pic img{ ) K5 K# w  A% j1 g
    max-width:780px;
& Z3 c5 g( t- ]( ^' mwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
! F6 P, J# A7 Kborder:1px dashed #000;
  K2 p& ~6 \0 v} 7 }+ n* V1 ^6 g0 X5 c9 x
-->
6 r5 g3 k+ F' K2 g( f% U6 V, @, M</style> & a9 O7 \$ G0 z
</head>   ~) i& O+ E0 p) q4 |
<body> 8 i1 _- p  Y' z. W5 ?
<div id="pic">
( p0 a# n9 Y3 l<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 V7 K8 \6 j) M</div>
& Q- p% W; m3 f+ P4 j</body> 6 G! j- {. h2 k3 ~
</html> & f, Z5 m8 S; ]. s# ~

1 l" g6 ^7 @3 l# x5 s( m百分比适应:4 p# |& |. ?, p6 i; l
以下是引用片段:8 |* T- K& L" t) R" b4 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 ]" f; C- C: {$ r( D* J
<html xmlns="http://www.w3.org/1999/xhtml";>
! a: `) I9 z& R/ D<head> . g% X6 {* K- {* A* a; {; |
<meta http-equiv="Content-Type" c />
- r; j; s( j  s$ D: [, l$ i<title>css2.0 VS ie</title>
& s' n7 S8 F8 t<style type="text/css"> # c7 n0 r7 C1 R8 x* F2 W0 g% m
<!--
" a+ {7 f+ R; T% r% e/ P9 Jbody {
- _8 |, d3 r" R" t8 g! E" W2 O( bfont-size: 12px; 3 x! X+ g7 v1 }2 ?3 P- f1 i
text-align: center;
2 G6 C+ W2 c* e! Imargin: 0px; , X% f( H' S9 s9 }
padding: 0px; 7 g+ ]$ C/ ~: e/ t/ @$ [
} + d4 ?& }3 ?3 G/ R! }9 L
#pic{ 1 r* F0 m: o$ o  {
  margin:0 auto;
; T8 d2 o( ]; `# Z5 P% N  width:800px; 3 I# X7 \$ O* k
  padding:0;
1 D3 K8 }0 p1 V% e  border:1px solid #333; 8 [7 R: p5 n, T; r3 H: L1 R: T' n) V
  }
0 L/ q2 p+ b: Y0 N/ H7 w#pic img{
' H3 [! b: S! t% B3 u4 p    max-width:780px; % w- c* O9 T: ?, l, d: ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& B8 T" D$ G$ C0 g8 H' M! Bborder:1px dashed #000;
9 R: i4 H- R5 H5 q% M2 z1 N}
' |( V; h9 J5 [% w--> : l. k2 K  P, d8 u
</style> % x! ]# H2 b3 d: b6 F7 J" D
</head> 5 \' a7 b* R, B" B- y  D) h9 F# i
<body> . Z. q* j; {; s. `  [  r. K
<div id="pic">
& s# v- r  E# i4 X6 ^<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 n6 o& M; G/ I
</div>
* t4 q& ~) P0 e" _</body> 5 G! e" V3 ]  s
</html>




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