Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. }2 a8 W" c: k/ k  f
关键在于:max-width:780px;以及下面那行。
9 ~9 m" h4 `# Q! ^8 y固定像素适应:7 B- i0 F) M$ L0 o

  L# |  F. G8 ?6 {1 e6 w7 jdotted; 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>  以下是引用片段:
% \' \8 }7 g* @2 y9 P<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" P4 p$ K" u' ^0 b7 z3 R# K<html xmlns="http://www.w3.org/1999/xhtml";> ! T1 a9 y( Z& `) [
<head> 5 x+ O, f, q; P( J7 t
<meta http-equiv="Content-Type" c /> - Y' G# H' }$ o  Y$ @9 c+ X% A) s- N
<title>css2.0 VS ie</title>
, H8 }8 J  x5 x7 k! V% Z" `<style type="text/css"> & ]; g) u9 e; G* \" r) ~  k) B
<!-- % H3 L- A3 E( z
body {
0 m( ]7 R+ y# h3 H* f7 hfont-size: 12px; ' ]+ a+ X8 z0 g/ @7 _- g
text-align: center;
& P3 a3 c. j  [4 }5 N' Y( Fmargin: 0px; , L: @  [; f- C5 N
padding: 0px; % X7 P: W1 L5 y$ k" \* U6 P" q
} 7 l+ X  _. m; `7 U' @' b
#pic{
! ^9 Y$ ?0 U, g- M$ z% h+ B  margin:0 auto; $ x4 A8 N: `. c; G0 }$ s( a
  width:800px; 6 H, H& t( t$ i: Y
  padding:0;
* T, u% ]+ f& @. ]8 j* V  border:1px solid #333;
0 o& \5 }/ R$ a* K5 V; F  }
2 \0 T6 v  P1 E#pic img{ + }! K% I3 P2 d& h: l
    max-width:780px; % V$ C# d, C  o
width:expression(document.body.clientWidth > 780? "780px": "auto" );
9 w2 C7 p' @/ Q  X3 d! s; \) Bborder:1px dashed #000;
( C# m* B; _! L! K0 C}
" l) }2 [2 k& x6 s7 X-->
; V; [; H  l& [/ s$ E: H</style> - H. S! a  J2 p8 D* I3 |
</head>
. R- x( R/ w* `) q" E3 {6 L<body> , y4 l/ \# h( h" U$ m
<div id="pic">
( X+ N5 k2 b  `  |# s0 Y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  r+ U7 a; \) E) S0 o4 t</div> - I$ C# ]) x4 F5 }) {5 G; k
</body> ! ]/ d, S) k: T6 Q
</html>
  j6 X1 f; u% m" S% b) {+ J5 R: g: x
百分比适应:
- A$ J( J9 E+ V3 x, U以下是引用片段:. k3 K' u0 }: [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> + e. q. g! a6 W3 i8 k7 e
<html xmlns="http://www.w3.org/1999/xhtml";>
. I1 k( y3 S, T+ \. d9 M3 y<head>
. Z6 _: I6 y3 `3 c& `- Y* j<meta http-equiv="Content-Type" c /> 6 J, G. S# H9 c* |
<title>css2.0 VS ie</title> 8 c' C  K: ~# L5 g
<style type="text/css">
9 y" J! U- b" T! d& @! M<!-- + X* w8 }9 D, c, Z4 |/ ~/ \
body { / ~4 D, _- U0 p8 o8 K
font-size: 12px;
5 Q# d  _" q+ I9 R; |" i7 b  a- utext-align: center;
  D6 U- {9 @; Q7 `# t/ ^, p# \margin: 0px;
- b. \- N5 Q4 E1 Mpadding: 0px;
, m+ A% G" X" h$ U} $ e0 `; A/ ^+ A$ w: Y# ]; k5 {
#pic{ & k5 _* r) x' y1 S
  margin:0 auto;
" n, `4 _0 }. u  width:800px;
7 ]8 T! y. X* i! T  padding:0; 1 V5 G& t9 F  x& _+ C
  border:1px solid #333;
9 d- W  T2 F7 z; X% [  }
2 e$ a3 {* ~2 S% I: t#pic img{ 7 Y+ }& l( ~; C9 t' s6 E3 x
    max-width:780px;
) C* s; |3 O# j- A; Pwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , w2 z* S0 t- O! \
border:1px dashed #000;
2 B- m& u$ D$ [8 x+ @$ v3 Y}
) S2 j3 X8 T0 a. O8 I3 D--> ! J3 e5 q: d# p2 N8 T" R; b7 l( T# I/ {" R
</style> ) O& D% N( _# A4 A0 h' ]
</head> 3 m# [* f4 v' g, l4 V' q
<body>
$ I7 a, b% J* V* L. V; O6 E<div id="pic">
5 I7 F3 C' y* V  N( x/ ]! y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 1 l# M2 C  D; C6 a- e- p) y
</div> # _4 S% d5 m7 |  [: D
</body>
* [8 B8 n/ t, l2 x</html>




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