Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
% O; Q- p  f( h* b0 c" n4 P关键在于:max-width:780px;以及下面那行。
" ?! d  C. {' M9 M2 P# t- c1 I: E. W! s7 G固定像素适应:
$ m/ K4 n+ Y) \* E" t0 Q, Q- l, ]$ U, w
' R& s& V- k) g9 Y/ ddotted; 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>  以下是引用片段:
- f2 N& y1 ~0 B2 x: p7 e: g1 V<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, M9 G) X6 S: e) z6 E<html xmlns="http://www.w3.org/1999/xhtml";> * ^1 x6 l( H" H9 K4 J+ Y
<head> / [# O; G- p4 S
<meta http-equiv="Content-Type" c />
; o0 \+ e* S4 B$ J' V5 E<title>css2.0 VS ie</title>
* M, k/ `( Z! g4 T0 {( \9 e1 w<style type="text/css">
/ d, W' V/ b8 r; c- V<!-- # c0 e9 O" s. h. [$ P
body {
- _3 r, k  _! A" jfont-size: 12px; 3 U$ }" R) j) p
text-align: center; 0 {& s; l- r7 B% N  h* @
margin: 0px; * A/ b# W+ M9 t) f( S/ ?5 \
padding: 0px; . \' W# n7 |) ]2 S4 D: u
}
- e& u. s& z3 Z! X#pic{ ; R! I- x. o9 n2 A
  margin:0 auto;
* t+ t+ ^$ L& M( F) ^' R, P  width:800px; ; A6 P( T0 ?6 M4 H
  padding:0; $ Z4 `; y( Y2 B9 s
  border:1px solid #333; 4 u9 f9 }$ q5 P( [
  } ) V: Q) B( `+ p9 z3 p$ F
#pic img{ 8 ]+ E' X, S9 d" j
    max-width:780px; % ^- ^9 m+ K* `
width:expression(document.body.clientWidth > 780? "780px": "auto" ); - l. {% M, w, Q( R1 X7 Z1 w
border:1px dashed #000;
: t7 t4 m; W- e) z% w} / ?2 j' u/ S1 j" d: a6 H, V' c3 x
-->
3 Z' ^5 \- e( Y4 t8 Z$ U</style>
5 D/ x% S$ w) w. {  E. \+ D/ G</head> ' Q4 y5 t: e* J) f( b; `
<body> ; D% O' _( I0 C0 Z& b! F$ f
<div id="pic"> ! n5 N3 F1 o( J
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 4 ?, H/ l# i: \) L7 G- q5 q
</div>
5 j( R) T9 Q2 E( v7 \# @</body> * n) T! G3 _8 i- B9 E# f  U" [; l
</html>
+ s) }! [3 O8 ^. R7 V! K: g( Z/ y& Y5 c6 {$ |/ t2 j( }0 R
百分比适应:
1 q- k4 s+ B" O4 Q以下是引用片段:+ I. x9 f& S1 e# r9 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, L3 H, ?8 _8 q<html xmlns="http://www.w3.org/1999/xhtml";>
7 f3 F, Y% Y& a5 _<head> $ u  s: Z; j4 i6 n1 M* q/ g9 H
<meta http-equiv="Content-Type" c /> 7 W% A4 h6 e5 a, S' ]1 `, w# P
<title>css2.0 VS ie</title>
! I: K) l( p. K$ b$ ?1 X8 K<style type="text/css">
7 [3 y) p) \% _+ L6 g<!--
: e; \3 X. c1 z3 h' _body {
0 s- c" t/ f: l! ^, P: L, Efont-size: 12px;
6 w: ~6 w* i( x! G: n5 l# {2 Rtext-align: center;
- s5 q  T5 T1 Y, n0 ?" kmargin: 0px; - y( J4 S6 z6 L5 P! [% v# r
padding: 0px;
8 R$ V) S* h' \4 \. R: ^" M. B} ! [( A& U3 F1 f) T4 A- I8 |0 g
#pic{ 4 Z& c! M( Q* n! P' O* z0 W3 i& S
  margin:0 auto;
' ^4 o0 `/ U% ]' Q# _  width:800px; $ }: Q) l+ A" p9 ?3 L$ b  E; p, l* |
  padding:0; & f  B" S+ U/ D" {
  border:1px solid #333; # P" h! D' a; L- e7 K. p' G
  }
) B- Y) d9 I8 ?3 w4 V  b#pic img{ . ]" e2 }5 A- X1 g2 ^
    max-width:780px; % h- x: m$ @( E# y0 M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 L& g/ O# z# Wborder:1px dashed #000; 4 Y7 d. h* P2 _) ~$ ^8 v1 z
} - |" ?6 ^: j" q5 d6 \; A
-->
* \/ \7 P- Y% Z  @- p0 R6 @</style>
# r0 k$ F2 k. y" o$ m+ b  l. M</head>
- o# g& ?( p" Z& e$ _<body> * k/ M, h7 P3 L( D: Z) z& z
<div id="pic"> 3 w6 ]) y# f( Q  k4 P  Y: O1 \2 A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
" [6 D; X1 f$ o& U0 n  _% n</div>
0 e" w! K+ D: y) U</body> 7 s! J* p$ t8 U# [- w* B% j& p8 b' ?
</html>




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