Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
  Y# m$ R5 k6 i; r8 ~关键在于:max-width:780px;以及下面那行。
# s# k0 y7 k' P7 x1 c' f  H固定像素适应:% [/ C  O8 S: r% B

" [% q9 o& ?' t2 t; 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>  以下是引用片段:) m6 W( M! G' v/ ^$ j5 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' [; ~; y: L6 O" b7 g<html xmlns="http://www.w3.org/1999/xhtml";> . i9 [! I) s* X
<head>
0 b7 N; S4 h* i4 m5 {3 X<meta http-equiv="Content-Type" c />
4 |  ~+ X. C( s! W) [" G" N<title>css2.0 VS ie</title>
+ ~* Q6 y7 L: d& ^+ T' X5 u! B<style type="text/css"> " E$ I: c# s. ?! \  D
<!--
' P& _5 o- S* j9 gbody { ( w2 y* D& w; o, `/ s/ J3 S
font-size: 12px; 3 j: T; T) C% @) ?
text-align: center;
5 o- M1 ]# ^2 r- {* P, M( Fmargin: 0px;
5 l3 A, ?) R% Wpadding: 0px;
( x& b9 @6 }! r} : W5 O1 |1 `* x4 a
#pic{ + O$ [+ n0 l9 l% l: f2 t
  margin:0 auto;
  r4 i5 D8 K: P! M3 l. F3 Q9 D  width:800px;
4 s5 h4 E  H/ t& U  padding:0;
. z$ R4 S6 o+ c9 b: r$ Y* t% J  border:1px solid #333; 0 m! L* _( |8 e; e' g
  }
* |3 V/ H7 B0 N! B- j9 {8 ^#pic img{ " l" m3 a& n1 x$ _9 S. L
    max-width:780px;
- O; I1 G% C$ v" Ywidth:expression(document.body.clientWidth > 780? "780px": "auto" ); & I6 i" {  @. s
border:1px dashed #000;
. n" v  y+ R7 K! P. s} ( a$ v; ?6 h# ]# }
-->
9 `2 T  Y6 m7 o</style> 7 f: A6 j% c+ b. i) f
</head>
4 n4 Z1 @  _3 u<body>
; |; q7 v& h8 w+ x7 O$ n<div id="pic"> 8 d& N% g! N7 B4 S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 j3 F7 {  i$ X) X</div>
+ t7 k4 q5 i+ m; p9 Q( N</body> ; Q# n4 |* V% c
</html> % e& J$ s) i2 E
) L* T' j# Z9 T0 E4 V  z/ z: m
百分比适应:7 Z3 k+ A! b  L3 ^8 e
以下是引用片段:) N) x$ ^! s0 L$ ^9 h) U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 d6 J( z  a7 B0 L<html xmlns="http://www.w3.org/1999/xhtml";>
. a, s6 D/ S" G4 k) x, B4 w<head> 1 U* t$ j) j. Z5 w$ T$ R" D" ^$ d
<meta http-equiv="Content-Type" c /> . o& X+ p. _( g2 k! q
<title>css2.0 VS ie</title> 1 {( Q/ f- n$ ]$ O" Q; i
<style type="text/css"> 8 F7 Y/ c7 ?' [) e. l& _4 O; |; x3 ]
<!-- / o  o8 R' J# B$ O% J# w
body {
% F* c0 V5 K0 K* N# C' s4 ofont-size: 12px; % B$ I9 t- c: l* R0 f# B) \9 n
text-align: center; % J& p9 _1 ?/ e: g9 d3 i6 S, R2 L
margin: 0px; , ]  S  c( }% l: H  ]
padding: 0px;
& A- U' ~2 d- D; O7 \& x} 9 ]- Q9 A2 ~, g4 t' |6 A: r
#pic{ 9 A; S1 U4 Y" i; x- I0 X! \
  margin:0 auto;
: V4 Y& k, D' l2 E  width:800px;
( ~! }7 G( F# p4 K; ^  padding:0; 1 y- \% Z. H0 R2 q
  border:1px solid #333;
) g2 ?$ f0 x$ |* N0 a. {4 M8 @8 G7 ]  }
  L. s+ ]0 h4 L#pic img{
, g2 y/ c+ \! U; h; B    max-width:780px;
) o+ q5 y2 P) Z; `; I. i8 V$ c& Gwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " R$ \+ l9 o9 U  r9 p- ]: N
border:1px dashed #000; & @% ?, E! _- h) ~  h! o6 b
}
2 i4 `( V4 W3 @# W4 n* s-->
7 j* j& P- c& p- v) ]% o/ l$ o</style>
/ K4 }  K) i; D$ E, M+ X</head>
" W4 D2 |9 n+ A3 G9 x. K  b<body>
5 {2 e0 `3 O0 D/ x) k<div id="pic"> 2 ^( L4 B: @, V
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 [7 h# `! p; D% I2 T0 u& Z8 Z; e  e
</div> 3 L" a1 v4 k# |# `% f' Y7 d
</body> 4 u/ m& l6 U) b0 Z* f- c. n4 F
</html>




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