Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 a! S, P/ p# o+ M* _关键在于:max-width:780px;以及下面那行。
; X+ g. _& F) i  M固定像素适应:8 B& v/ j) z' R

; l. v3 K7 {! ^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>  以下是引用片段:/ d; M5 y. \) L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, Z6 W' N8 j6 f. C+ c7 u<html xmlns="http://www.w3.org/1999/xhtml";> 2 X/ s, x8 u  m" F3 ~
<head> 8 K0 f1 B& ?: J6 p4 D$ K- W
<meta http-equiv="Content-Type" c />
6 z5 o8 K3 }; r<title>css2.0 VS ie</title>
0 V* D1 j7 ^, {/ R' b: O<style type="text/css"> 4 d3 c9 J8 ?. p* X4 K* U$ X
<!-- 1 c# y8 e1 d1 r2 m8 Z
body {
9 y& e% U; b2 l# S% tfont-size: 12px;
! }5 C7 k; ?0 S; W8 ], j& V! d: M" itext-align: center;
2 d$ f1 s8 K: F$ P' R3 d5 dmargin: 0px;
1 P; }9 e: K4 y6 K) Epadding: 0px; . z8 j6 s. k! w6 h& ~. E, ?7 `! P
}
' C0 e% z/ |; }6 ], r, F4 Z0 ]#pic{ $ C9 i( X; E/ u- {( ?; V2 K
  margin:0 auto; 2 z3 e$ k/ U8 G# \/ q: p
  width:800px; / f' \% i/ \- d: g
  padding:0; " d6 q) i. i6 s, r; f# ?
  border:1px solid #333; 8 h' h1 \0 r  N5 U7 L
  }
9 l) \* h6 B. W  E#pic img{ + n" D: [" [. b) q
    max-width:780px; 2 a" @, h( `4 y0 Z3 f
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 6 j( z6 h1 A0 p7 ]
border:1px dashed #000;
. s; L- N  L( O}
1 E/ d  O5 T8 s* u- J- N6 d) `--> 7 F# r5 P0 o9 S! ]( |9 x5 I
</style>
* w4 a+ ^+ Q! |% A" j</head>
4 q: j; e% V5 g<body> & Q' s) n- X9 s% |5 j
<div id="pic"> % k' Q1 n: L0 F- j! }% o" ]
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' a: Y5 }. l2 E  _* ~
</div> $ e7 f3 }. X! T' a
</body> 7 k5 Q& L2 A0 E
</html> : B3 `- m' B0 y9 t; l3 _( r

5 c( N5 E6 t. q: w/ |3 s7 Y百分比适应:( m4 @$ t2 K$ s7 K% K4 P
以下是引用片段:9 s' ~* Y2 }, P: H1 A. @0 M+ N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' j9 @( w8 _! }+ g. _+ \<html xmlns="http://www.w3.org/1999/xhtml";>
8 G, S7 v8 |" Y% f$ P<head>
0 k: n7 g4 b! u- A$ D) V<meta http-equiv="Content-Type" c />
* Y$ L* K8 r7 t0 x7 |<title>css2.0 VS ie</title>
% E  H9 R) W1 q<style type="text/css"> * O# i$ z  Z4 A/ r1 o
<!-- & F) a- G7 V) F! J3 I$ K# R
body { 1 T) J( n1 x: _! d0 ?, ~) P2 m
font-size: 12px;
9 W$ o5 m: ]. `0 N+ e8 [. {text-align: center;
0 m) Z7 p3 |4 Z/ ]. L+ J* s8 Omargin: 0px;
/ v$ E5 G" [, \) L/ b! B7 kpadding: 0px;
6 R. m2 t2 f( I) S! T% Q/ |, m}
2 y0 Y: t* y" d& f2 k#pic{
; U9 }+ n* c6 B+ L  margin:0 auto; . }2 u5 k6 v. F# z6 n
  width:800px; ! b" q$ e2 ]' u- S: B
  padding:0; . r2 `# [! s& A
  border:1px solid #333;
& Q/ w: d8 ]# R7 u$ |# b$ n4 W6 [  }
4 E6 W$ @! Y  C" B' n. A#pic img{
+ i9 H. I8 a. H& r- f9 b    max-width:780px;
% B+ H; C( y7 \1 n7 |3 Z4 @9 Hwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : B2 }- {/ o) B0 a) H9 m
border:1px dashed #000;
; w5 R4 Q9 g6 x% W3 S: _; N. T} 7 h# A, X3 v6 _) k  W# w1 q' j1 I
--> . q, }& ^, V) l% V0 A
</style>
( ]1 x3 Y8 M3 X8 v</head> - a) Y1 I+ P7 L4 n6 p, z
<body>
2 W5 k- X) \. h2 j, p8 A<div id="pic">
8 u+ E4 ^$ P9 K, I3 l<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 U5 x9 u0 p7 N; P2 g% q, O</div> , |$ g: M7 U7 X1 p( ?* S0 a! |, k
</body> , P& W: a  b4 A9 b! |6 W: O8 x
</html>




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