Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 r) D9 O& v- s7 S0 J. h2 V关键在于:max-width:780px;以及下面那行。
/ r. u2 x, s/ f9 Z4 G( C固定像素适应:
4 ?) K3 g0 y- M; K  [' F6 {. _+ e3 E; ~. b! A* k' h5 E
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>  以下是引用片段:; i; L$ x! t1 Y- a0 f
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * n. z& {; z* ?+ \' Q0 t8 c4 v( ^* ^0 V
<html xmlns="http://www.w3.org/1999/xhtml";>
  a: f2 r3 z; k) ^- I! d' {' h' A<head> & i; {$ y: Z4 O2 ]1 v: _
<meta http-equiv="Content-Type" c /> ; A& k1 T. j* S! l# Q/ b: ^: G
<title>css2.0 VS ie</title>
$ O2 Y4 H1 z# `' ^: d<style type="text/css">
2 }% m1 u/ W$ |<!--
- b2 `, [* i5 G: ubody {
# K& {7 u. ]3 Ffont-size: 12px; 6 ^+ W$ M+ z2 X' T3 Z* I
text-align: center;
4 B( h$ ^! O" Y+ Z' Umargin: 0px;
/ D( [" k0 q. {# k. ~padding: 0px;
8 |% p/ E4 d2 K0 r1 Q# @}
4 H$ z: {5 b# ~- d0 r3 z#pic{
6 C' C6 |& q" t1 n! l  margin:0 auto; " x; @1 y0 i8 @3 W! Q2 K
  width:800px; " y5 v1 w0 }& J* m& e: E
  padding:0;
: a* F$ w, ]- r9 e7 v+ Z  border:1px solid #333; ; q2 q* [1 r3 [& `* T
  }
# O0 ~4 ~4 l) F  q#pic img{ 7 N1 j3 p2 ^( m5 h$ a2 w* V
    max-width:780px;
: F4 U/ ]7 N0 d+ Twidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 Z  ~' j# c# Z" _1 I9 m
border:1px dashed #000; * d# N5 H+ H& C! h( e* e. D
}
/ k6 K+ f1 \, V$ ^-->
) i. k+ K- M, s+ C! p3 D</style>
% }( {* y1 M0 w" |</head> 9 C' k: h5 V0 K$ E4 C/ B8 G+ l0 R
<body>
$ g1 ~# m* y/ q- U( K4 U+ a6 r. x% P<div id="pic">
. y7 z  y- s0 h<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
% l6 [/ g6 s4 W% {) R</div> 9 z: G+ p! C/ x/ }9 G/ m- }
</body>
$ A( K8 ?$ S4 p$ N$ C" o# g# j</html> * C7 H. l/ j/ N6 G
" G1 h  u9 D( Y. X. M# E; S& W
百分比适应:/ }/ Z  Q+ G8 r9 P( j
以下是引用片段:" c" \# T. N; ?0 k% p; C8 D' p
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> : z# I" }5 D$ H# O: e
<html xmlns="http://www.w3.org/1999/xhtml";>
1 F$ w1 H8 [9 S<head> 1 N7 V- _7 P- b$ x' Q
<meta http-equiv="Content-Type" c />
5 O; \; `) j) m: ]6 ]3 _: s<title>css2.0 VS ie</title>
1 J$ J, V1 H1 Y<style type="text/css">
1 U8 u% i6 b5 n' _1 s- E, o9 N: c; x<!--
  d# A# u7 o# S* J' T/ ubody {
1 d! Z7 ?9 F& Dfont-size: 12px;
4 h2 {, a) @' B$ ?4 Utext-align: center;
- C+ R& ?) @( b' u# u) G8 t- Wmargin: 0px;
. x  S" a& I' l1 \padding: 0px; ) {5 i7 p0 p$ Z1 y/ f* E3 X+ C9 T
} ! D9 H+ D, r, m- @! N3 m6 n
#pic{
  O1 u9 C; O. o: `) k9 m: v4 I; x  margin:0 auto; ) d% Y2 e1 f5 D2 B. N* O; ?% V6 K3 a
  width:800px;
  b& P; m, g. C0 h/ j! ~8 m  padding:0;
4 D) f4 U1 j  I) M  border:1px solid #333; 1 W; \2 ]3 c2 o" J
  } 4 u, A0 H. P+ p/ s
#pic img{
0 N2 I# h2 Q7 L. K    max-width:780px; ; ?! J& ^# w5 D) M4 B
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " k2 K1 v) U" x0 P5 \+ ?3 B6 ?7 I
border:1px dashed #000;
+ L3 Y) Z6 E$ m9 |} 7 L7 l) `' H2 W% ~8 P& c
-->
1 }) m- U/ Z* e$ N8 n0 W" j8 w</style> - z3 d4 F( m+ C* n; o7 A4 G; O
</head> * O6 s8 }8 w+ |/ {/ _0 K: m
<body>
0 {3 C/ ~; G" r/ I4 \$ f<div id="pic">
: T+ k& c# B' ?# M( G1 \7 a: J<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
, [+ l3 P( e: U7 f4 F; P! y</div>
' S. q- b/ U8 k' e& I</body> : u' A: ^. p" }* }3 M  b) r
</html>




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