Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 t3 `& L5 ^( ^( M# v关键在于:max-width:780px;以及下面那行。; n9 `8 Q9 R1 `& r& n
固定像素适应:8 v2 o+ k( v3 T  f3 U. R5 {
) J0 h! Y' O7 p3 Y4 S" ]
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>  以下是引用片段:9 j' E# L: ?, G/ i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>   N7 J* z+ X% m: m2 Z! S  S
<html xmlns="http://www.w3.org/1999/xhtml";>
" ^2 D$ b; W) p) i6 d<head>
; ^8 w) V8 T8 ~/ l<meta http-equiv="Content-Type" c /> : O* F% |6 p; K9 U  b6 A8 m
<title>css2.0 VS ie</title> 8 a' O9 F  Y4 w& @$ M7 e; S7 H
<style type="text/css"> / j+ M% K& [5 s7 R8 X  n/ f
<!-- ( o" d0 N" Q, r2 i6 f: x( o
body { ' r- a+ `# }8 o% ~1 t
font-size: 12px; $ P, ]% ]" K9 l9 l
text-align: center; 7 i5 b& t3 O+ Z8 N/ Y& ^' p1 X, @3 [
margin: 0px;
$ M3 X. }# N2 N4 J1 y2 _3 spadding: 0px; - V+ C8 {7 S6 e3 l1 U! p$ p4 ]( m) Y' F
}
, s" d5 E# Q  H/ u' \! K#pic{ " b0 C1 W  }( M- Q" o; j/ |8 X3 X
  margin:0 auto; 4 n# X/ O0 Z/ z2 E3 c8 G
  width:800px;
* L; E" E+ G  ]& b  padding:0;
" w/ R( `1 a+ v& v9 [$ n+ M+ C  border:1px solid #333; ! h1 y  K) W, h0 C& f7 v
  }
; Y; D) C8 j/ Q9 A#pic img{ - g: U. V3 v% g: \( @& h( ]
    max-width:780px; % z4 ]) _5 e5 Q/ y! D& q6 G
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 5 I4 n, r/ V5 ]: Q3 T: {5 U! O* u
border:1px dashed #000;
9 U9 v' a/ x3 G  v; w. u6 `7 ^; D  r}
- T3 n$ t+ _% [$ T1 g--> + Q5 I" T. z# F6 j# G
</style> * u& I  c1 U& @2 }" l! Y8 S
</head> . V. M6 l+ ^# e
<body> + s* p$ E. q! k1 z3 q0 Y
<div id="pic"> $ d$ l: K7 V  K1 a5 [
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
: `7 t* a$ S) M$ `& I</div> $ C$ r, e2 x; Q1 U
</body> , F) C) P3 A/ s
</html>
4 R* `, ?4 D+ Y  j) |8 A, e% `! R) R& t# C0 U% {
百分比适应:  l5 t! X1 b5 }5 }
以下是引用片段:
9 k+ S. \% y, g$ v+ O# |( X6 V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , E7 D% S6 O2 y2 s! N. a4 e0 w) O
<html xmlns="http://www.w3.org/1999/xhtml";>
% t0 H  D4 ^) C6 V( l) k$ i<head> 4 U& K( L3 T& l0 b$ L+ z
<meta http-equiv="Content-Type" c /> 8 \0 ?+ j9 G* V) ^6 I
<title>css2.0 VS ie</title>
% x  p4 {" {8 V4 [3 s4 o" w<style type="text/css"> " [" b" a* s, K! Y  P
<!--   G6 k8 ^' d& N' ]
body { 9 ?. P4 B$ L' n- P% |/ T* r. t  J# q) [5 q
font-size: 12px; . j' B% Y( F. Y
text-align: center; 1 w1 R- P/ d0 l, j' [( x
margin: 0px;
1 d* h& l6 e, zpadding: 0px; 0 Q7 U7 C" u+ E
} 7 ~( C0 R0 N8 H! `
#pic{ 7 f9 }: ~* U( L  L. [  r2 W; [9 z# u
  margin:0 auto; 9 Z1 J; V# ^$ v3 n1 p1 {
  width:800px;
" t& C* c- w" A3 T2 [  padding:0; - V" v7 t( S) p) l4 g, p) u
  border:1px solid #333;
. j' k, B, R# c! y# O  }
( C! k. C( P+ u3 Z$ y/ @#pic img{
, A( O- v) W0 T( m+ G/ k    max-width:780px;
! L/ @: F" C, ?" m: [% b7 m' {width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); & X# {( L$ W  n  A7 G9 f
border:1px dashed #000;
% E2 @8 h+ n* i: b. E} ' d5 b7 ?; W8 U% O" e* L& |
--> 0 F4 D+ Z# s- p/ T! f: s/ {# b
</style>
5 i5 A2 D8 @. A/ l! A7 c* C% i4 X! ~</head>
# ^) d. I: ^, B* ]<body> " K, A$ ?* V# m8 r
<div id="pic">
; w3 N  O+ s5 `/ H0 l+ J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 8 H* p1 o8 l/ t& r! ?
</div> - d7 w* V# \, o" t+ [
</body>
2 G4 a8 B' l/ x# w0 U! c/ r5 Z</html>




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