Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 w. @8 O- }6 P" S# `4 J关键在于:max-width:780px;以及下面那行。
) d/ W7 {1 c$ F2 p7 Y# h固定像素适应:
5 ?: y% t; u/ P; H. F3 q5 |2 V% F4 R6 o* s: S" @! r& b
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>  以下是引用片段:* }0 |0 z" Q/ `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" R+ b7 o- [1 P<html xmlns="http://www.w3.org/1999/xhtml";>
/ L4 @  v2 ~1 `6 P<head>
! y/ S) @' n: z; Z; N& c<meta http-equiv="Content-Type" c />
2 _5 g1 i4 o4 n; A<title>css2.0 VS ie</title>
( G3 \5 c* V! P<style type="text/css">
2 j/ {+ a( Y" T5 }- n1 J& O# b<!--
! C, f8 V" V5 W+ zbody {
! v+ k# ?2 r- e& tfont-size: 12px; . V8 k/ J+ L4 H
text-align: center;
8 @5 ?; l/ {+ H/ s+ C6 o6 Q/ s) Zmargin: 0px; 7 n+ X6 e" U+ \' L+ S( P
padding: 0px; - o" P2 T: q  P- u; Q. t/ N3 T# @& h
}
/ I5 c5 g" W, [#pic{
7 h1 `" P7 P5 z/ v; ?  margin:0 auto; + Q$ d5 F- h: p" ~: }
  width:800px;
! T/ H) R( [' x: O7 T  padding:0; 8 Z( f1 i! K( q( v  T' ^
  border:1px solid #333;
2 Y" F4 _5 A9 _* N6 G3 F' i  } 3 }6 P5 w& K  W8 C  `
#pic img{
* N- [! m# V  Q" p1 u    max-width:780px; ' I. j' k$ C9 c/ s5 i
width:expression(document.body.clientWidth > 780? "780px": "auto" ); # C/ E* k0 R: K1 V  P6 D
border:1px dashed #000;
! `$ d+ U; u0 w, M} . y  m9 V9 ?" S( M1 M- b
-->
4 i! S' e5 v  c8 X9 T9 ~</style>   v/ {4 S5 x3 P8 b
</head>
+ r" h2 N8 f$ g( x<body> 0 f0 D! a* _) [4 I, |8 N
<div id="pic"> $ R$ l! Z9 D" E6 v" O7 a! Y
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 O' G% k5 q8 t3 J* Q  I5 _</div>
% w2 R  |/ W. N+ ~8 K+ P</body> : K2 X/ f) U& m9 k8 `
</html>
+ y# b" M! |' c9 s$ k
7 I( P% [/ i4 t2 O/ g百分比适应:0 M1 f; w! |" I( u
以下是引用片段:2 B0 Z$ w# A- i3 v! G9 t& ?( o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " f0 [: u1 M9 w' l
<html xmlns="http://www.w3.org/1999/xhtml";>
" @, y7 T. B+ A9 U& R# B<head>
# N4 P( y# _# L' j2 e' U. i$ B<meta http-equiv="Content-Type" c /> # z3 i% X! f) r" M5 N' u
<title>css2.0 VS ie</title>
7 q: Q, E; m9 Y$ C<style type="text/css"> 4 s) E7 [: F4 C- Y9 c( u5 c+ W: |
<!--
0 I" K; c; u7 y' Z; V+ obody {
1 E6 ~' T# X  T, t4 X$ Ifont-size: 12px; : }- {8 z* j; z6 `' _$ h+ D+ ~
text-align: center;
$ B% U  }' {  Z* r. `) Q. y* F% amargin: 0px; , A) H9 m% |- j' i( f3 K
padding: 0px; ! ]6 h1 Z0 I- `0 O  P; @3 @4 }
}
6 l& I% d! O) B- G0 |#pic{
1 }7 b; W$ K( e# I5 ~+ S- C  margin:0 auto; 3 A1 b6 z- F0 |) w! e* ~8 u
  width:800px; 0 b2 L! _8 x5 ~+ s# M6 z
  padding:0;
( N$ j4 G$ _2 l; Y5 U4 ?  border:1px solid #333; & A8 }9 f3 b# ?* e
  } ( p: Q1 [0 G+ Z1 k5 p
#pic img{ ) J/ }5 z3 U) K/ G
    max-width:780px; ; g( n4 K& Z0 s2 ~* Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
  B# f" w/ R, Pborder:1px dashed #000; * q  ?1 Z8 c$ D, }
} % a6 M' @) l/ y* ?* g6 N# z
--> 4 Q9 ~# T: y+ O% S
</style>
9 {4 c4 y5 A3 o, o( D: L7 M- C# D</head> 0 d6 F( N7 U5 b( V
<body>
$ [9 s" v0 t2 H% i( K! v4 W<div id="pic"> % g! U6 A% L1 d! Q: |  i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' A& S& i; k8 P+ z
</div>
9 P: M/ k' M3 s3 ]) @& z5 }- K* v</body> % T* @$ P( ^7 J/ P9 |2 N, T
</html>




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