Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。' b% Z2 X+ k8 v& F3 F* ^
关键在于:max-width:780px;以及下面那行。" @' L$ J- z7 g
固定像素适应:4 s. z0 S+ b, j

+ {2 x6 j2 C. ?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>  以下是引用片段:! a8 J3 y0 W4 j, L0 J3 f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 z- i# u/ A- B6 N8 C9 q+ S<html xmlns="http://www.w3.org/1999/xhtml";>
( Y  y0 {8 D! k<head> # {# E& a: N+ M' a) @9 H# I1 m& \
<meta http-equiv="Content-Type" c />
0 [7 D$ e3 |4 w) u' i7 z' O4 T<title>css2.0 VS ie</title> & j; Y: d  N7 A$ m  k
<style type="text/css"> 3 D3 w  h" ?; J* \6 [& k
<!-- 8 {! [1 M# `+ f4 q
body { ! E6 p4 s) h8 i
font-size: 12px;
7 z6 ^" B1 z- }" R1 `9 F; `text-align: center; ; G( _! y7 z/ S+ A5 H
margin: 0px; ; p, N/ r, P% A* h5 D! o/ C
padding: 0px;
3 A. `* x& Q) }/ c3 L3 c% F}
7 r/ c3 N, X6 C( `: ^- n# I2 `! N* d* R#pic{ ' y, D: Q: g; @2 @
  margin:0 auto; & h# S- p# Z. ~* b1 F
  width:800px; 3 [- F% ]! t3 o( F. [
  padding:0; ' h& T' R2 A+ @  w# t3 C! Q
  border:1px solid #333; 5 H8 [5 \6 L' }* w( ~
  } * C& E/ z2 W/ ^
#pic img{ ( A8 Q" S1 x- B& Y
    max-width:780px; 2 ~) h* p9 [0 U% K/ g5 B: ^3 N
width:expression(document.body.clientWidth > 780? "780px": "auto" ); , T$ z' z1 G* r6 l
border:1px dashed #000; 6 g4 j7 N3 s9 R  i6 ?& M3 C
} * ^: l1 y( W$ M1 n
-->
/ W2 e  F) h7 ~- @</style>
0 |6 K9 ~, j- h9 N7 p+ n</head> 6 Y2 o0 a% B# l2 g
<body>
8 `/ r7 _5 ]% t7 M3 s& `<div id="pic"> . [$ ]& `% @* r. j# M9 O
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 e3 z: V7 M, }# v) Z# `4 W</div> , x& X, \9 k- ?/ K4 y$ \, v( ?
</body> * y0 K# s+ j8 U
</html> 7 T5 R6 k( [& i% h( [0 t
) b  J8 H8 V/ y5 R' V$ P
百分比适应:. f; C; h, l) @
以下是引用片段:5 G! m- a& ?3 d: R+ i1 x1 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 w& K, l4 G( Y4 B
<html xmlns="http://www.w3.org/1999/xhtml";> . D3 }, Y& h7 F) d6 L& c
<head>
; K8 ]' T: [+ i8 f<meta http-equiv="Content-Type" c /> # E" v& j$ Y( |5 b2 R1 c7 e9 m+ S
<title>css2.0 VS ie</title> " y, o: o0 x8 H
<style type="text/css"> 3 E8 l) i- r& J+ t2 @2 [; ~
<!--
* S; t5 N( L7 X1 l4 p5 b( U  Abody {
' q9 [1 V# \& ?/ ~4 w6 cfont-size: 12px; 0 J; u4 ]6 m" p' H
text-align: center; ) N2 A% u  r5 }% `
margin: 0px;
* S: R* @0 f  e+ Jpadding: 0px; 3 F, ?. I+ Y0 g% s6 ?6 z" k
}
) s9 F, ^, N$ t+ @% S" p#pic{
0 O* c: W3 K' u! r9 U  margin:0 auto;
; C$ H/ X7 o1 d* q3 N  width:800px;   v; ?4 F  p+ N. t, q0 V/ Q
  padding:0; 3 R2 ]: ?& l1 B5 B, x& X1 m/ e
  border:1px solid #333;
: e: n, Y6 h- B$ G  } 7 a, ?" J" s: O8 F% R) N4 O. p
#pic img{
; O" H2 ?% K' R& n; x2 A    max-width:780px;
# S2 u. X, s4 `1 {# Z* Nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) ^" `1 S1 I, i: n. gborder:1px dashed #000; 8 y$ {& Y4 b  Q6 o
} % M9 V$ J) {: f) q0 n+ L
--> 8 U  R" h$ N% w7 M: ~) f
</style> 8 t" C, r2 v' k  g
</head>
) g* }/ H9 G0 |# y# \<body> $ @, V1 I, S: Y2 }, a/ @# [
<div id="pic"> 0 p$ a) G$ y1 G/ ]) G
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 d0 x; t# |+ e- {9 [9 U9 z0 F
</div>
  N& f0 z  {1 \1 D' Q: \2 V</body> # q: \  P/ k$ B
</html>




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