Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 D% D! D. l% U0 U0 w6 u关键在于:max-width:780px;以及下面那行。
$ F3 O0 t" l+ L1 e9 s固定像素适应:
1 V4 [0 A! ?* f2 h+ G0 z' c+ r, T9 D- T4 ]
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>  以下是引用片段:
! a: U- u" N/ @2 g& i) y3 |7 o9 J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - X$ j/ J+ R3 [/ y/ j
<html xmlns="http://www.w3.org/1999/xhtml";> % q4 w# b, N/ i& [. @2 m) U
<head>
6 s9 K+ d! {( w# r" n2 f- ~( \<meta http-equiv="Content-Type" c />
: k0 ], M: b. I( F- I<title>css2.0 VS ie</title> 8 i" v0 M7 |$ z- V
<style type="text/css"> * p* N& G! m% P
<!-- 0 C. F- k2 v7 d. X
body {
0 v* z# K' H3 C$ G) pfont-size: 12px;
8 v( x. I& ]  C8 u" [text-align: center;
5 n$ a" ~$ X$ r4 u1 j! o  E9 F# Smargin: 0px;
/ Y7 o: P% t( L8 v. `0 j' qpadding: 0px;
+ `; P8 w; E  g& G! W/ [7 q1 h- |* r/ b3 B} & U+ j  d& i1 F. ]
#pic{
" F1 ^& k* Y# X  margin:0 auto; 7 z4 o" S# \1 I. v  c# r
  width:800px;
5 L( M, N3 \, S) W! J4 [  padding:0;
2 F: T0 |. |3 g  border:1px solid #333;
8 g+ r- \  ]2 _) x2 X% R. ]8 Z, x  }
$ `8 P. K. n3 J% m# w7 U. A#pic img{
6 p# n4 {4 H" h% I% A    max-width:780px; 5 \# q0 A' [( `) k8 r
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 7 x# x/ h5 f- l# k4 l/ t5 P! R
border:1px dashed #000;
1 T* K1 k& m1 c* c7 i} 9 U+ ]# g9 }& R1 o; C  f& U. N
-->
2 D) W' B0 M# @9 w) |) N</style>
7 ]  Q% O$ h* `( e. h$ y</head> & p, R' d3 \6 x* ]$ G: f, L
<body> 3 z7 f3 Z2 M& [6 s9 Q* f* l
<div id="pic"> , h* R9 |1 y& i1 D2 `  j
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  s. l1 u8 j/ I. J4 d: K</div>
9 c" T# ~7 j0 u" y; s</body>
, I  h2 F5 Y& N9 ^</html>
  [* l; U3 R% e; R
: T. c0 ^2 E8 m百分比适应:
- m) V! Y" U/ r, T% _% F- T以下是引用片段:
2 v$ e) v4 b$ f- u- ^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ e8 v: `1 i3 f4 U1 K" W<html xmlns="http://www.w3.org/1999/xhtml";>
3 c( J4 m& n3 Z& s7 u. g<head>
: `" g0 z0 K" ?$ P+ R! a% W<meta http-equiv="Content-Type" c /> ) G  y3 ?" ]3 e" |
<title>css2.0 VS ie</title> , F5 @! B7 D& P, r) Y3 r
<style type="text/css"> : W+ y+ X/ P7 z
<!-- % ]+ S# B' ~& u* l) g
body {
- `7 V: I2 A* F" [font-size: 12px; 9 O/ r* ?+ n! ^* R8 _
text-align: center;
; j, ^" T( k6 l, p, r0 W8 x8 cmargin: 0px; ; g- l5 Z, ]: l. |  x7 ^! J9 T
padding: 0px; 1 d  d& s4 L0 C, ]9 p
} , H0 K0 ~$ C" N! m' J
#pic{
' e) S! X4 _- \8 q9 }6 p! s6 T4 j* V  margin:0 auto;
6 A( z) ]) L' J  width:800px; 0 O; f) r) n# k  ?* a) r5 z9 g
  padding:0;
# J2 N: M* N" J+ a0 `& G1 P  border:1px solid #333; $ b4 A/ ]' R7 y) c
  }
% E, @2 r' i) |+ g. h* H' S#pic img{ , j, A8 u/ d9 I
    max-width:780px; 8 _- n7 C$ o; W) o) m; }$ R/ ~9 |
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); ( Z, r' b$ B( |  V) I: y7 {1 S
border:1px dashed #000;   L0 f" r2 r. j% v% O/ X: D
}
7 H8 Z3 v  f4 Y--> & |8 X2 F* N$ g$ Y' P
</style>
0 K4 _+ f+ ]: Q0 y( y" l8 O& H4 a</head> 2 _0 w- W5 m; Q
<body> 7 b3 [, J  W# g+ e
<div id="pic"> " ]6 ~6 z" f7 G" z1 T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
! W4 H% v- R" P. Q</div> 8 U6 ]$ _0 }' l/ o- p
</body>
' j7 E! b( }4 N5 B; m) f</html>




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