Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。. |8 i- `- Z/ _& ?) U
关键在于:max-width:780px;以及下面那行。/ k+ v$ w# a4 B; @5 v  F$ c
固定像素适应:2 {' ~0 x# y0 L) }# ], y4 k* P

3 P4 C; A. v4 a0 `- m+ e% U& T) }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 `" {2 w- k# H0 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( x; p: K2 O' u9 y4 N; \<html xmlns="http://www.w3.org/1999/xhtml";>
! a; \( f. U& |0 A, s& N: S<head>
; x6 V+ M: ~3 Z, k, X, S; v% Q<meta http-equiv="Content-Type" c /> 5 Z7 h0 k- k/ O1 z& n  I; M( k1 Z9 K
<title>css2.0 VS ie</title> " R: n8 s' @6 y+ h% c. H- i
<style type="text/css"> 4 G8 l/ `- l) v( h7 x
<!-- # V7 n, \1 ]4 j. n1 P/ P$ i; h
body {
! x  m4 [3 n7 e2 O0 dfont-size: 12px; # }" X+ X- `& ?. E; N' t
text-align: center; , t$ G( j0 ?+ ~7 C+ I3 ~
margin: 0px; 8 N: v: F+ i8 E# y3 i6 A
padding: 0px; # S- p, |, s+ f$ L' t
} 8 @" T- ~, p" i
#pic{
4 p! [/ k9 e+ U7 F. j. t" I& o0 f% a" Z  margin:0 auto; & \0 V! o3 U3 s( L! n: a" j
  width:800px;
# ]9 q  S9 z! v* r: V! R  padding:0;
2 b8 p% ~3 w8 V" d; ^6 r' q0 F  border:1px solid #333; 2 W, s+ J# G+ c7 m; d
  }
4 |1 m# K; w$ N) i1 E#pic img{
8 d# A9 R; v" O# S    max-width:780px; 8 {: R. t7 E$ _+ H2 `7 M
width:expression(document.body.clientWidth > 780? "780px": "auto" );   q0 {; f* H# V
border:1px dashed #000;
& }& K- d+ L  W- _( B% B2 S}
8 F) x/ R9 V. g7 q5 N-->
( b1 R3 {4 D3 p+ B3 X; z& H</style>
7 k, W$ r- x$ s0 P8 Z9 C4 X</head> . _* k' Y6 a+ _
<body>
9 C8 ?! s  w. z8 T: F6 g: R<div id="pic"> & ], ]9 v( A* p
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
6 s, @- T( d- k& _/ D3 N% {</div>
1 X. r+ M' v) m- O' I) [</body>
. C! K9 ~% P- t</html> ( N. [# A) r' _5 x- Z$ g! d& a

2 T- U# [* m. [5 Z  n3 J7 y! ^百分比适应:: H# K, B, ~/ S
以下是引用片段:
; j4 L# T7 r; k<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 9 P5 @# k$ D) f
<html xmlns="http://www.w3.org/1999/xhtml";>
. T% ?2 U$ G  d8 @1 _# y<head>
# D+ g; P+ r3 u0 G<meta http-equiv="Content-Type" c /> " u; n, t/ g- s7 l
<title>css2.0 VS ie</title>
2 D+ b# Q1 _1 _) v6 e' p<style type="text/css">
3 z- l3 L# J( ^) D' H& Y' o+ x<!--   e* k+ D$ R: e/ R$ |* @( ]
body {
# @1 [0 v! a% K& Efont-size: 12px;
% G/ V. v7 e" s% D$ v% l1 Jtext-align: center;   o# W( L6 W) i4 j3 r3 W% C
margin: 0px; ' t& Q0 m; r3 r+ W* E2 P
padding: 0px;
5 u, X! m% m0 u+ j2 o}
7 `. T% w2 m& N& Y7 `4 C+ X#pic{
. q( F  f: U) n( b5 U  margin:0 auto;
2 J$ ~# [# A+ [* {( a( H- P  width:800px; ! Z& a/ ?( |7 s1 z$ B! o
  padding:0;
7 t/ z6 `& w9 R) j1 k  border:1px solid #333;
5 X- H; s- C3 |! [5 n- ]2 C* R7 [$ Z  }
2 o' W* a' x0 y, k# s; p, k, J8 `, t#pic img{
% ~* N: }: `+ N( t& l- `" h    max-width:780px;
& H0 G. u6 ?8 U0 A; }: e" n2 ewidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; G; e% w% ?- I0 f; H. X! I2 rborder:1px dashed #000;
: P: X  h, d  D' P6 F}
6 U/ I8 J/ p1 g7 v+ S-->
# T: l9 a' b" k9 N% R</style> ! v' |, M* Z0 Z: ~
</head> 2 ^; E. ?5 E5 s, c5 ~/ J1 k
<body>   h$ v$ Y2 D# x& H2 P+ `
<div id="pic">
5 p- ~4 h) _& g! i: N) R* }<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ) b) M$ K7 k- {0 p
</div> % H0 a) M9 b( }& Q3 ?
</body>
- I2 p7 l# F/ ?</html>




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