Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。1 Z7 ~% D0 `. N) u' ^# a
关键在于:max-width:780px;以及下面那行。
# F0 n% y  G: j/ A* ?固定像素适应:& e8 A/ Q' d+ P& w! V
4 J! p" P( B# K+ j7 L" m$ 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>  以下是引用片段:! o, ^; s' t' D0 m+ {) m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : w/ Q1 w5 `' d# y) b
<html xmlns="http://www.w3.org/1999/xhtml";>
0 S  {8 u4 O4 j( K1 k# w: H<head> 6 Y2 X; `7 e% B! B
<meta http-equiv="Content-Type" c /> - q; u0 I+ |+ K
<title>css2.0 VS ie</title>
2 g. h6 O0 {8 L4 `6 f) t0 W; p<style type="text/css"> # }8 s" |2 q8 n: @2 g, a
<!-- ! X5 P3 L$ i4 Y; i- K# ]! I( Y: v8 Q
body {
, a8 g0 M: N8 r% k, m% Jfont-size: 12px; : j+ d* H! b) E% x- n- R
text-align: center;
' ]5 G- }' V9 p; g' u" s" [& omargin: 0px;
7 q; _; _; I4 v. z; B' jpadding: 0px;
! C$ ?7 z8 ~$ Q6 g8 N% j# H} , |8 C4 a3 d: _) }' p+ |
#pic{ ! t0 S1 F5 k9 m$ ]7 R% `; G8 I! g
  margin:0 auto; 7 g% q6 o1 h2 }+ g8 N% o6 N
  width:800px; ) h. \1 G2 z; f4 Y2 r* t
  padding:0; " a) U0 M  |; y! n3 q
  border:1px solid #333;
7 ]9 [! g5 [3 {0 o, E+ O. M" S+ T  } # Q  \3 n: {( g  H$ I* ~$ x0 S
#pic img{
& V) `$ U. C5 S3 V& H0 Y    max-width:780px; , z1 u" T% c, c& w! j& O9 Y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 O# v# l% \( a  i0 rborder:1px dashed #000; - g0 p  z* s! ~8 T, I  y
}
& h2 {- ~" d# l3 a-->
1 n$ X, {& A, b: u& \</style> + i+ s- s$ v2 N# z6 Y
</head>
2 I; @, t5 p+ E0 R5 {# m2 f<body> 9 B! I: a) P$ N! V
<div id="pic"> ; ^3 f! l9 c) Y0 b2 d8 Z% t5 I
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 P$ K5 _) f$ G- h) i$ @
</div>
  B7 I& }+ I/ q6 f/ _+ Q4 b</body> . _7 U/ {! z# t6 _3 j4 S, t& k
</html> ) H2 ?, g- ~. e8 ^1 o2 H

4 |0 b- k1 p. O6 v6 L; g百分比适应:1 @5 ]! B4 o4 U9 j
以下是引用片段:& k4 H; u4 O( x* `/ p+ T6 o: r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ k. D, Q9 a! c6 i<html xmlns="http://www.w3.org/1999/xhtml";>
6 ?  k. N) p/ H5 Q; h+ t9 ?<head>   ]+ K/ K( v+ b$ _
<meta http-equiv="Content-Type" c /> 4 R* M! ^3 U( K$ U, X8 P8 a
<title>css2.0 VS ie</title> ) I# I" g4 o: k  o! b
<style type="text/css">
$ _8 q% i+ U) ^% @<!-- * a. n- I* F9 K$ H5 h( R
body { + W& E1 L- k5 _, ~
font-size: 12px; 8 [' {2 _% B7 J5 {- E9 y/ p2 x
text-align: center;
, y) u" ?. g% t) Amargin: 0px;
1 B2 L6 E3 m* @7 R  Ipadding: 0px; + C- F! X& O$ S# K) ?
} . `3 d! V+ N, K( ^; R6 ~: {% z
#pic{
  Z! V( C: \3 e; }& K: f% r+ h  margin:0 auto;
7 R+ h  v4 T$ J2 l0 h8 x% ^  width:800px;
) ?# `* L' k% z1 X; T  padding:0;
! I, E9 }+ i- ?( z  border:1px solid #333; ( t+ @" Q/ g% n6 P! P
  } / H7 ^# W, o9 C. l9 ^, _
#pic img{
* S" d5 I1 l5 U9 ~    max-width:780px;
8 y% _+ q4 H; q& b4 ~( ywidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 4 `& i" A; I: @
border:1px dashed #000;   n" U" K; k: N+ |+ r0 d7 b
}
* Z5 g" B7 n6 t--> 4 U3 t' Z5 J0 W) N6 v
</style>
& w$ G; R2 q- A. n* P3 t</head>
% a' i( N+ @, _<body>
' U7 C' Q4 x, y) [+ t<div id="pic"> 3 c' a2 X4 X1 n: @5 w% R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / N( T  p" {: e
</div> ! x/ r6 @+ C% v3 {; J+ v
</body> / I. i/ g7 }3 M0 F' {* |: d2 Y2 X/ S
</html>




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