Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 F. ^4 b. V/ A6 D$ w1 y关键在于:max-width:780px;以及下面那行。. ~' L0 c7 T: b
固定像素适应:1 p; D: t  t0 Z) L# `4 F6 I

! y% [: n1 \5 L/ A, ]1 Z+ pdotted; 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>  以下是引用片段:% ]0 {5 L/ `' v. V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, G5 o( k. L) c/ e<html xmlns="http://www.w3.org/1999/xhtml";>
' Y# o, ^& g% B( H<head> & A7 |$ n% C# i& t* Z! J
<meta http-equiv="Content-Type" c />
* O2 [' j' T' e0 X<title>css2.0 VS ie</title> ! z8 V' k* g! T3 u' \
<style type="text/css">
+ @- |# h: p( h$ o1 a<!-- 2 ], J% p5 G- l) C# I
body { 7 F9 [) s7 C3 y, t
font-size: 12px;
, Z0 P6 ?$ P8 a# b% p& Otext-align: center; 9 @  E1 Y! P- ^7 l* h4 b
margin: 0px;
  x  y- D" O% M4 l. y) S( ^" Wpadding: 0px; , s- D2 N4 X; j/ c4 S$ J3 R& F
} * b$ S. f, E! N" t$ z; d
#pic{
3 V( N" t1 {# m- m, ~# _  margin:0 auto;
/ _! ~) f( b2 U1 P  width:800px;
, I! B) P5 b. \: l7 Y! L- W  padding:0;
+ E  C# Z0 G" e* Z1 ]5 T  border:1px solid #333;
  \, z: G  ^. r: q& F$ n  S  }
3 h* u2 P* E+ O6 K0 T#pic img{
1 ]# V% i* i# X/ F    max-width:780px;
# V5 ?! e" \" L  N3 W0 Owidth:expression(document.body.clientWidth > 780? "780px": "auto" );
! t1 V4 ^& m1 gborder:1px dashed #000; ; L7 M8 w8 {4 K: u$ I9 @
}
- Q. s( f/ a1 n  z0 _; i-->   ]$ n0 F; F. p, h; X2 n2 H& {
</style>
* C  g+ E- ?: U  y8 C, D</head> . A4 d6 j7 G; _- Q- e" b  E7 U1 S
<body>
2 [$ X) N$ T& x- S<div id="pic">
8 l) o% \' ^1 X! s/ q! \/ ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 U8 U% `+ v7 a" f* J& t7 y
</div> ! ?, O3 T8 j6 y& \
</body>   D  K, S7 e; {* I  V7 D, t
</html> 2 V* m$ g% q3 X$ t! n$ D, r* [% E

- r7 ^5 F: S2 m; E) R3 r百分比适应:+ Z5 Z$ {. C. U7 K- _
以下是引用片段:; E. p. m6 k! ?- }. B( a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 ^  G/ ]- }+ n! g2 V% g
<html xmlns="http://www.w3.org/1999/xhtml";> 2 {2 Y+ z6 b! N; k; z5 ~6 Y0 E
<head> 6 D; z! r. l9 V: U
<meta http-equiv="Content-Type" c />
7 _' Z+ ?0 l8 h& h) j6 t) t<title>css2.0 VS ie</title> 3 X( z+ u/ \9 k# y
<style type="text/css">
/ z. T0 X; P" j! C& |& ]: P9 I<!-- ! Z4 S3 O. L* f! u1 w. R, P1 H
body { 3 M. X4 o) C# B  J/ r
font-size: 12px;
2 M0 z/ g1 @9 w  E) x- w, }' w, [text-align: center; & P; H( u, d/ l( r+ I
margin: 0px;
, ^- L5 |, ?8 ?/ B1 F" S& |! ppadding: 0px; , {2 T! }) E" K5 C/ d
}
- z6 O7 B0 K9 N  g# [, Q#pic{ ( X; j! c' ]5 m2 A
  margin:0 auto;
/ `, L. A/ S# A/ m/ ?  width:800px; - L. U6 I# n% I7 v7 k
  padding:0;
' {/ g7 A2 a. O  border:1px solid #333; " _1 v+ H$ [# ^( K6 P7 p2 D
  }
! W0 J3 w8 d# ^0 M9 ]9 P#pic img{ 9 h1 l6 c7 C$ v" z5 r( E
    max-width:780px;
) o2 ]" ]# N$ _0 |width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( z1 m5 ]& P  E; M, Tborder:1px dashed #000;
( i/ O/ g) c8 y% X7 M( G}
$ ~* D$ U, o# h) d! C9 Q1 g: g; L--> ) W4 z1 r8 q) i/ ~6 ?
</style>
4 z1 ?3 d! A. ~. ^) x9 A8 r1 T</head>
# C3 c, w7 h" a9 ^2 R<body>
+ e4 Y! ?3 X/ Y# d1 a<div id="pic">
; `9 x/ r3 G  o3 ~! C+ w0 `<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , F+ w/ x0 h: P- \) c4 ^& s
</div> % i) r: F" }2 X) x
</body> - U, h" z! G' {9 A$ s6 _
</html>




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