Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。# x8 _% [" r7 f* j+ R
关键在于:max-width:780px;以及下面那行。" v' U+ u2 k; d3 G% g# F
固定像素适应:
% |1 G+ j+ {' R( G3 c9 i5 h" _/ w  ~; n4 ~
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>  以下是引用片段:
8 t1 v- Y8 N- _% O3 H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> # V2 t5 Q4 C0 R# ~0 z  R% g
<html xmlns="http://www.w3.org/1999/xhtml";>
2 F/ O5 k' r" l' O: W4 h. z<head>
% x6 D  ^# Z1 Z7 e% `9 c! a4 i1 i<meta http-equiv="Content-Type" c /> / l4 a+ S1 j& c  }
<title>css2.0 VS ie</title> 8 c8 D' }8 B  r2 J9 P
<style type="text/css"> 6 l, O# t" f# E( j( Y
<!--
2 A8 Q8 p7 X. Y5 Z! B! p/ u7 V, Pbody { * P' n5 Y# _/ P3 @! [, ?
font-size: 12px;
; a, M# c" Z! m, d* M0 J% Otext-align: center;
/ Z6 _2 H; N$ ?& mmargin: 0px; / N; D% [( s8 _6 J, z
padding: 0px;
) T" h- V1 p# \7 N$ \( m}
* P, L  ~8 W3 j3 }% P) K#pic{ - O& o- l9 D1 v7 `) h% u, B7 k
  margin:0 auto;
' x  }& Y) l) K8 B  width:800px;
/ T0 ?" x$ g! v, t! P3 M  padding:0; * ]* m1 A" b( ]! X/ l! I! S
  border:1px solid #333;
1 b  ~2 `3 H: t+ T; x) |5 r  } , T. W3 Z; w. c* j- C' p$ U- I
#pic img{ * V4 Q1 Y/ {9 Z
    max-width:780px; & n7 O+ y: r# J" ?' x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, z- W/ L: I+ A/ wborder:1px dashed #000;
8 b- [( P& X9 x: f8 q& ~; D1 d} * {1 C9 W2 Q! f
-->
; ]% ~  @( h* U1 s</style>
" D2 E1 S( p: C& @& g  q</head> % \# k" p; s0 ?
<body>
2 R4 f) s2 |! `6 l! H$ A( m, p; @<div id="pic"> # h4 x$ ^, q9 g1 d
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
  ]0 d" L* b/ u3 i" S1 C</div>
& f( P8 e" M, e' r</body> : o1 f& s  V- L/ F/ K. s, Q; v* z; y$ Z
</html> ) u1 \5 {  J7 O: `+ M8 c

6 O3 {/ m' K5 q百分比适应:3 E2 }( ~1 i9 D: k
以下是引用片段:
# J( \, V9 g; b4 }4 Y5 V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; v9 X3 c0 R$ M! e5 r9 s* f
<html xmlns="http://www.w3.org/1999/xhtml";>
. x  Y  K) ^5 [. Y/ v3 p" A<head> 4 ~; x; M/ n0 F4 U! W
<meta http-equiv="Content-Type" c /> ' T" _3 _# o- J* I
<title>css2.0 VS ie</title> 3 D7 \4 V# q; X6 E" f8 m
<style type="text/css"> 4 d9 @' Q+ o) j5 M- p
<!--
8 x& q( h+ u; ]# {# K- W4 Qbody {
8 g4 U: ?/ ?. ?* l1 Dfont-size: 12px;
9 [& v- z: q) C! _9 K; [text-align: center;
8 I3 m% `0 S# ^/ S; S2 ymargin: 0px;
: H6 W) X; ~0 W$ mpadding: 0px;
; u- A4 I5 ^; a' W  Y+ x9 A: c} 2 I6 t' d  y* b1 Z2 S
#pic{ & w* G- g1 P2 a7 P5 W
  margin:0 auto; $ E; [! r/ |. r5 q" J4 \
  width:800px; 5 w( h1 b' _) O: e+ ~; E' a
  padding:0; 2 L$ r7 y) s6 i
  border:1px solid #333; , h; i9 n  Y3 D
  }
" c1 |3 y! u0 D2 M& ~5 y4 m) g#pic img{
3 W7 ^5 j1 R/ q    max-width:780px;
4 J' R( a1 o! g! Z( d9 ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" X: ?& U3 L5 u, d4 i( ?border:1px dashed #000;
' J2 e( P2 q0 G# f# m}
$ W0 a: t: |0 u-->
) y5 B5 C2 z8 w  k</style> " }  B  o. R0 U
</head> ; l6 q# V8 v- ]4 Y
<body> ) R* x3 @5 K7 u9 A* K
<div id="pic">
3 r% V* H- M' D' ?: x& j; Y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
5 c9 I6 S3 Z: v</div> ; |- Y5 I' W! A: n, V
</body>
& ~4 F3 a, m" z</html>




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