Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* p% {: O7 L" V: k关键在于:max-width:780px;以及下面那行。
6 T0 |7 J5 b, B$ P固定像素适应:
6 A0 N0 C: U9 l5 ?5 n8 N# y1 i8 }9 j; S  g- M
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>  以下是引用片段:* \) i7 X% p3 X- Z  |; C9 g. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 3 |: ]  [  d8 x  Z5 t
<html xmlns="http://www.w3.org/1999/xhtml";> ! S2 L, F  i: i1 M$ l, W; q4 ^* T
<head> 3 A- Y/ C. s3 b0 q1 e3 ]
<meta http-equiv="Content-Type" c />
7 s4 e2 Y. ~* t<title>css2.0 VS ie</title>
2 h& }/ ?4 l0 d# n, N) Q& G$ K<style type="text/css"> 1 x9 M0 V" m+ N
<!-- ; e, T6 g! g# M: o0 w
body { & ~1 v3 }0 U+ m* X6 ]- f
font-size: 12px; # f5 n) A( K! E9 s3 R
text-align: center; / X  l# k1 v4 w9 w: v
margin: 0px; % F  I. q) M7 w$ A7 F& g, C" ~
padding: 0px; , z" B7 B4 f+ d4 d. p6 p8 {) U
} & X& s+ b" T( h: g  D
#pic{
$ U: }% T8 d$ |% ^) \  margin:0 auto;
  s' g3 w% v. K0 ^7 X7 _" R# u4 z  width:800px; 5 m% q4 ~2 c6 W6 |, Z
  padding:0;
7 Q, e( y4 j3 n, j  border:1px solid #333;
, f' ~5 g+ _! y* w  }  }
5 a: }1 d! `- p& r6 `#pic img{ 8 g* p1 u) a1 S9 Z# m1 d" Q- m
    max-width:780px;
9 n7 O/ `; A! Nwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); ' G% W0 f4 l( W6 p# D' M/ q
border:1px dashed #000; ( c3 G: U) o2 ^
}
& Q: y6 f% Q. ]/ P4 d# f# F6 |" Y-->
* V& U( g/ q  h; r. M' P</style> # @' t/ {8 a7 q1 h# h7 a/ e8 ]
</head> 0 k6 t  e0 b- D
<body>
$ m4 r( B4 R! Y5 x# W9 W<div id="pic"> - b6 S2 i/ W& r3 q4 I3 ~0 \* z
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 Y( b: D8 Z+ U</div>
+ b( H2 P# U9 F" ?7 e</body>
& ^4 y9 z8 ~5 \5 j0 O</html>
1 u3 }/ m7 L. L
0 p* c, R8 {( R% V! b) n. M0 z0 T: r百分比适应:0 z7 G- e1 O% u7 ]% T' w
以下是引用片段:! F! H+ g& U7 C4 n+ T2 `2 d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 8 c) s( c' M) {+ X' ~9 d
<html xmlns="http://www.w3.org/1999/xhtml";>
6 L' q3 r+ L' `( X: d+ j<head>
3 k: u+ o9 B  T8 x! W<meta http-equiv="Content-Type" c />
$ ]1 o  Q3 |; n* @: i<title>css2.0 VS ie</title> * i( T& m3 H- F( p" L) M
<style type="text/css">
6 \5 q- |* h' ]! j<!-- ! w/ H5 e% o2 n. [
body { ' i2 y, x4 C7 K' U
font-size: 12px;
* |. I7 {2 j# Y+ M" u- r. Ptext-align: center;
3 T& t$ j. R# g* dmargin: 0px;
$ [3 C$ j, t8 w4 C! @8 u( h- Xpadding: 0px;
7 s' T% u3 [# A5 [1 N} 1 z( u% f7 u( x- _
#pic{
3 q7 \% ]* ]5 s$ s- z4 d  margin:0 auto;
+ r" C+ a4 p% R- I& A" {* }  width:800px; , x# o( ^$ d) ^: K! I# U# a
  padding:0;
. a* Y7 ^2 C7 U) z* V( \6 O  border:1px solid #333;
, O0 K* @* S$ U/ F  } 0 I5 D- P; M) X4 c% ~8 p. s
#pic img{
( g' t9 Q1 z% |% j    max-width:780px;
- o+ C! h. i( z$ A7 ~9 W- Nwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); . ~# O2 ?4 F# ^( N6 c2 c) l, m
border:1px dashed #000; " G8 ]9 d( R3 x! u
}
6 W& h# D* h7 N1 W  s4 V4 d# ?-->
3 ?) }5 U- |" b8 _</style>
  m* c6 V3 O( d! `, Q</head>
: e, g- A. f: ]: |<body>
% z+ c/ D2 D, _: z<div id="pic">
# `6 e) `8 L% @) Q1 [) C' T<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 X3 C. ~- ^9 N; o& Q, t1 n
</div>
5 v* {# R; h8 O& L1 A; \- y/ H</body>
1 x& w# U3 E; L# Z' r</html>




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