Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。% q: u& b  q8 G' J1 w
关键在于:max-width:780px;以及下面那行。: B/ Z* P: `- c, ]2 h* c7 n
固定像素适应:3 [; z9 N* A9 x+ x

# a5 T. F; z# B6 ^/ idotted; 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>  以下是引用片段:
1 G" b! O  s* w( h, {! I<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 M% ]& u4 y4 r5 ?2 j
<html xmlns="http://www.w3.org/1999/xhtml";> & e! Q1 _, C( y
<head>
$ u4 S0 P+ N; k<meta http-equiv="Content-Type" c /> + r4 G  b; L9 s. K/ C3 B
<title>css2.0 VS ie</title>
! `) P& K- h; v3 k<style type="text/css">
. T* |, `! ?9 F<!--   @* m; M3 C* F4 U
body {
5 W3 ?' J. n: lfont-size: 12px;
( O$ V& a3 O4 \3 p5 z/ Ntext-align: center;
- X& b2 w, C6 _margin: 0px; 9 V2 T6 p/ B$ a7 t5 ^9 Q; E
padding: 0px; : Y& m5 s6 ?, f) m! J0 u+ ~* A. f
} 5 b' S% o/ z1 j% o* }# O
#pic{ , E5 b6 [" h$ I5 t
  margin:0 auto; * @8 k9 C* p3 Y' k+ D
  width:800px; - j9 H; T0 Z! a: E# d
  padding:0; 3 u6 J- B, i* W* s+ `  L/ q& v
  border:1px solid #333; . F: B$ C# u% N, _6 }+ G) U
  } , z: ]! b# C) }( S( J. E# j" G. g' w
#pic img{ 4 D6 O' q( ^" j9 v8 c- d4 k+ H
    max-width:780px;
$ E4 V' F; _& X) L( ^width:expression(document.body.clientWidth > 780? "780px": "auto" );   D  Y; x( n  T
border:1px dashed #000; + s  Y& m6 o: p9 [" Z& o, x" d( @
} % v4 g0 Q- q% N1 k# }2 M) Q& P
--> - B+ E: v; f; h! C: d+ z6 v
</style>
; `9 s( k. b" F</head>
; M3 E# _/ p7 e$ F$ q+ A<body>
6 h3 R1 q3 P( e8 Z& u+ s: d( I<div id="pic"> ( \6 _9 f+ j: X$ @2 J9 A8 @; H) B- _
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; [/ T7 i  \9 q  w+ w, E$ d</div> 3 z, T/ r: l8 ^8 _5 O6 `7 o
</body>
( I- w5 l/ M4 z% e! `' g</html> # t$ j$ D* C2 |& h8 A: h4 U
  X7 p2 O2 W! V% `/ s
百分比适应:* N4 c; l" `% H0 J- z" k3 G
以下是引用片段:
: U) |5 `( A  h/ \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; E; i8 l' R( @' Z+ x0 a
<html xmlns="http://www.w3.org/1999/xhtml";>
$ A2 g) D, |% W5 l  j7 m2 x<head>
: y. d( h$ V+ J: ^<meta http-equiv="Content-Type" c />
% d$ w, P7 t7 r( `$ l& I<title>css2.0 VS ie</title>
# b/ A  c& F% ~8 I- l<style type="text/css">
: I) Z. C: i# W<!-- ! o9 p  L% w4 z& ^6 i
body { 3 U+ v# V  ~( c, _: s
font-size: 12px;
9 z- `& o2 j# Utext-align: center;   x" ]/ L! e8 b# ^2 f
margin: 0px; ) m/ M: U) E1 T7 Q7 g* s
padding: 0px; % P. O8 p' A+ ^! b
}
5 |# n  v6 _. p#pic{ 8 h$ v9 d7 k# Z
  margin:0 auto;
) t, x+ j' ?4 L3 J' K! p  width:800px; ; ^3 j( \; u( W" I* p
  padding:0; 2 S0 k/ B' r% n% c; @! C
  border:1px solid #333;
: d! k% ^5 G9 A. y  }
1 n+ M5 q0 B# A1 S#pic img{ - u2 I" h3 b+ [) e6 Y
    max-width:780px;
8 D: r! T$ W5 P" p0 \6 Owidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - z3 Z, ?2 d# \7 r
border:1px dashed #000;
# G& g* K# `9 ?! z* f}   W" O3 K& O( Y' Q, T
--> . a3 E( P9 I' p3 W( L
</style>
8 a6 A' j& i* H/ g- `1 r</head>
+ l- D8 h9 L: x( q$ i7 D4 Y4 P) G<body>
  \# Y' c, f) ~, ~7 X<div id="pic"> % w( S# w* r6 j1 Y# m
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 i7 D4 ]3 w/ b0 h4 q" R. e
</div>
5 g2 x  T3 w$ z</body>
' h" H6 o) Q" T! B</html>




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