Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。* T( r! \1 z; G& g7 i* v. E) d
关键在于:max-width:780px;以及下面那行。
4 W) c5 h' o( i5 [+ m0 ^& E固定像素适应:
+ I( w. k: N; l
; c$ t) d3 I  x5 adotted; 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>  以下是引用片段:
" V! c$ M6 p: \% L) B9 N3 w3 p<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. O+ L% ~- X' a5 o8 `( m" Z<html xmlns="http://www.w3.org/1999/xhtml";> 5 I' u* w6 k- F- c3 C/ f* i& D& a! J
<head>
* R9 B9 c: `/ M$ d% _. u$ r! V9 y- g<meta http-equiv="Content-Type" c />
8 p& ~, X2 w$ U; F/ j" q/ \) ^<title>css2.0 VS ie</title>
+ e8 K6 k( `, S' t$ [<style type="text/css">
8 g% P" A/ W% Q<!-- + ?7 N, ]2 l: v0 Q/ M  _- F* F8 u, X
body {
# Y7 ]  |9 ~6 xfont-size: 12px;
; U4 ]. F7 W$ Y* {text-align: center;
3 ]0 Q9 s+ Z; q/ Imargin: 0px; 5 @9 c( `8 t/ v. V: G1 q
padding: 0px; 2 A7 S9 {" _# z- W
} 7 c' {" D; e& x) c& o8 `0 K7 A
#pic{ 7 v! v7 t3 X, c) a% r! X
  margin:0 auto; 3 @5 H  _$ H; c7 `) u) Z8 J, Z5 N
  width:800px; ( s8 ~; ^9 A2 i# a0 C  m
  padding:0; 0 N6 S6 s7 K( E! e6 A
  border:1px solid #333; 4 D. r* {0 {4 o2 {% }( n5 y: F3 Z
  } 7 }4 J8 p6 B! P- X4 {6 H8 S0 F
#pic img{ " e0 E8 X7 C+ n$ }: T
    max-width:780px;
6 \! u: M' z4 G4 s! p0 B2 U0 vwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 6 z8 T- \( h. F; T$ y
border:1px dashed #000;
1 w- [" y: g& e}
% @" i9 r4 [  t8 c7 ^; R! x-->
4 Y* S6 G. D6 n% w</style>
' R6 w8 g1 Y" P% g8 F% P</head>
+ ^- I5 X5 X$ V) f<body> 3 V' |9 ]5 f* U) w5 ?
<div id="pic"> # I4 m* t* d2 e0 W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ! d, f! ?/ w  j- ]/ m
</div> 9 v6 D* J3 _, f: M1 U- H( Y. e
</body> # `$ d; w/ f7 `! o2 o
</html>   D9 D! i' t3 m* ]9 _  p

  ~6 I+ Q) M2 G( ^百分比适应:
" t( F. c( q" d  C# n) R& O以下是引用片段:- h% q) i. i# T- b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ d7 y' `& x: F! P) Y6 u! L<html xmlns="http://www.w3.org/1999/xhtml";>
, L: _4 }& r3 t; W<head> 4 c1 o! G0 o4 C( ^  X" F, K" o4 f# v
<meta http-equiv="Content-Type" c />
9 v3 p! i3 I+ o1 [8 t<title>css2.0 VS ie</title>
% {  L4 a9 K; c5 B" N( ^<style type="text/css">   c' ^2 h: k' d% u) m8 T. d
<!-- 3 N, h( @/ h5 O: @5 x; p4 b: k
body {
$ E+ o0 v/ B: lfont-size: 12px; * x8 p( a6 m, }7 g8 V  {0 r
text-align: center;
9 }2 Z  k* f1 p5 F7 y- Jmargin: 0px;
% ]+ y) ~: W3 O1 f3 i4 T: Q6 vpadding: 0px; 0 o. e& i7 o% L, c" `# `
} , k+ S( V. E2 {/ k
#pic{   ?5 l. ^, t9 D: K
  margin:0 auto;
* I) D; e& }( J8 u  width:800px; + A9 T1 Q0 j/ d& f" Z+ W
  padding:0; " l, E3 b& O' h8 i; T  R* l( ^
  border:1px solid #333;
2 v5 N6 O3 L! h% X* k8 D& W  } ' D" p7 B3 d1 |& d5 b
#pic img{
2 `4 F+ D' W, s2 i2 t( q    max-width:780px; 0 {- t' o- I7 R% @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 `2 ^5 s$ ?, \* {3 x- {border:1px dashed #000; 9 ?% g7 c6 ?- f$ }; G& |' V
} : T, g6 Z- T: p* v. k+ D
--> : t5 g  w/ c! R4 W( ]
</style> , b5 J8 b) k! z. c
</head>
2 |/ U7 {8 Y. U3 P: y9 ?5 X8 z<body> 4 B4 A) `) @: E6 i% a: S5 S
<div id="pic"> 2 z9 N5 }# @) V1 C, c
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 D; o+ i4 w0 ^& R$ s
</div> 1 b5 m: u+ G( C2 i# s. D$ H9 o( D
</body> : [+ L5 W4 I; u# ]: F6 b
</html>




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