Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. M% j, C( R' D8 ~: N  C' f
关键在于:max-width:780px;以及下面那行。/ U! G# ~# g& _; x+ d4 n
固定像素适应:& F- {2 B# K2 o- ?2 G+ c

. H" K4 f3 U8 D2 pdotted; 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>  以下是引用片段:
. a1 F4 b' N0 r( K; w% ?# O- K) R<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% O# f+ P" D. h; Q+ m<html xmlns="http://www.w3.org/1999/xhtml";> 3 g" h% J# i' g" @( u% J  W0 [
<head> ) r: G, k, O1 s$ {) W
<meta http-equiv="Content-Type" c /> / p0 w$ r2 [# Z
<title>css2.0 VS ie</title> 1 p  Y2 Q- |1 m6 R; H
<style type="text/css">
2 F0 Z2 T3 S. u  g& I4 f) [2 C<!--
" l9 W9 U/ W9 F) B* I+ V( zbody {
, M5 z' x/ `) Ifont-size: 12px; 7 E, B+ Y( e' M4 B) |. N
text-align: center;
+ I: ^4 \2 U6 d4 Cmargin: 0px;
5 @* N( I: |9 \- Wpadding: 0px;
) g  V8 L8 |) H4 q0 S- O}
! X. E# x7 ^6 W7 X, k#pic{ - ]$ F# _( ?9 @, h, Q- e
  margin:0 auto; 0 r% c. s( c! N4 ]$ J, u
  width:800px;   Q3 i) O8 l# _  m, Y
  padding:0;
3 d! s. z, p( B7 [  w" g1 Z  border:1px solid #333;
: [+ U% q" g$ y2 ~  }
1 u6 l3 J8 m) a/ R: E* T5 r#pic img{
- K  Y) A' w9 \2 U    max-width:780px; " r8 U& j3 ]& J* p( ]* ]
width:expression(document.body.clientWidth > 780? "780px": "auto" ); / @/ O" ^) D' q! f, J# H3 O+ w7 |
border:1px dashed #000;
  c9 A& v: J* D' ]! m- ~} & u9 s, C' H" M6 e" G0 R0 x4 }
-->
2 Z) u3 z0 x6 g# X4 M8 i7 m: |$ T</style> 3 A( _/ F5 P8 {7 o  l7 M
</head>
9 K* p2 ?7 p3 {% |0 W<body>
% }$ @5 R, x7 f) |. @2 a<div id="pic"> : E; u+ n" }' \1 P/ v5 c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 R8 o5 @: v8 L9 X2 q' t</div>
4 T: `. P2 h2 D. \/ ^5 B) \</body> - N3 @/ w! n2 p
</html>
/ r0 o0 z! I! o8 i
/ i$ R/ [3 U+ m/ a0 @百分比适应:' k6 o% V4 E9 b- u
以下是引用片段:
( a: C# g# U) R; u$ n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; Q( O. Y' @- A: x<html xmlns="http://www.w3.org/1999/xhtml";>
1 p" x, ]. Y) ?; E; v<head>
( v; w* y1 U) z% t+ L1 h" f" I<meta http-equiv="Content-Type" c />
0 v& ~' z) H6 b! I% L( @+ T<title>css2.0 VS ie</title> ( s8 ]; \" j' a$ I. a9 F
<style type="text/css">
( o1 ~$ v/ r( l: n<!-- ( s# g) L# n: a; U+ A) T& r
body {
( g6 D' H' a1 `3 k! qfont-size: 12px; 9 F: H; Q6 W8 m. M) q- ^
text-align: center;
) v+ n1 ?8 `4 e' jmargin: 0px;
+ `7 P: w6 ~( d1 B7 H+ _' Spadding: 0px; : X4 c- M3 n1 a5 g, [2 P4 C
}
. o+ P6 h6 u" [) k1 ^#pic{ / l# a( Y) R" G! T9 L9 Q
  margin:0 auto; 6 o% y& s$ `) E& p$ X
  width:800px;
: M& o+ c) N( U( L  padding:0;
  V7 {% C) @6 y5 T3 K/ f  border:1px solid #333; % y* H1 C5 M! K
  } 9 ^7 u; k! r9 O5 T
#pic img{ 3 z7 F8 m% n3 J; V. `  D7 J) P& N4 R0 D
    max-width:780px; & Q) m- V2 r' }& ~' f
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. o+ r2 Z; s0 B4 L( m( W- rborder:1px dashed #000;
9 q* G/ ^$ \8 {' x+ y9 N/ ?) j* p} 1 X6 p2 u: \+ E8 g) ?% T
-->
# R( s9 H( F$ U</style> - j& V( P5 X; D* J: J/ g
</head>
1 W$ _  D. D4 [1 |<body> + k& f! e/ t: y8 i- v
<div id="pic"> 9 U3 |5 l" f, m3 e& d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ( b. g0 _# @, F% g
</div>
+ k: O1 }1 c- v6 a' X$ N</body>
& h5 B8 b0 n1 |7 y</html>




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