Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。; ], W1 d5 @2 ^; W6 y2 y4 i, ^! ~
关键在于:max-width:780px;以及下面那行。
' c9 y* A2 Q: J% T固定像素适应:
2 s2 \- {! j3 r; N( `6 P
' ^* L) f* G) {1 ndotted; 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>  以下是引用片段:' _( O" F  I4 ]5 {- E' _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! Q9 K  A. e' `+ @9 G: R! ^<html xmlns="http://www.w3.org/1999/xhtml";>
# |: B' Z& r7 r1 f/ K6 V8 f<head> ! \+ o# r' w9 |1 d$ F
<meta http-equiv="Content-Type" c />
4 l0 w; m" b+ V; W( r: u<title>css2.0 VS ie</title>
5 j- N0 v9 x. G<style type="text/css"> / X& D1 |" h, ^" n, N
<!-- ! ^+ j) r( M% f4 F$ x6 f: T5 N
body {
4 T! [6 `9 f4 L( T+ @) J/ _font-size: 12px; ( k/ H" U: u- n( X3 p. w8 i. A
text-align: center;
9 N; i- x8 {1 x. y* Tmargin: 0px;
8 h9 N! P1 A) Vpadding: 0px;
" y5 ?5 \! ^3 e' l; i* l}
$ @4 b# ]. z2 f" H' X% G8 ]* k1 d" A#pic{
4 w- P1 [6 ~, c3 Z& h7 c  margin:0 auto;   E1 o' L( c3 u1 x* |  D4 X  R+ E
  width:800px; 1 P' ?" R# s& U
  padding:0;
, L6 ^- w8 h, I2 C$ Y! B( Z  border:1px solid #333;
) F/ V( @+ h& a; T, ~  }
/ f+ o3 ^1 N% ?0 h$ V$ t0 ~+ m#pic img{ + g. |+ d. p; \7 K  M9 {
    max-width:780px;
/ c( q9 r1 E- y: Z) _3 {. `width:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 O4 u0 z4 b% Q& c& `! s
border:1px dashed #000;
% a* O* S2 P1 w2 `} ( h3 V2 C  n- T# `2 n
--> $ P. K. N% b6 P
</style> : \9 M. b( c2 l8 k" E
</head> " ?4 r$ w$ A* C4 J4 T
<body>
+ W7 T9 G" ^$ @* R<div id="pic">
, e6 c+ c5 }  c7 G8 g<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % I1 Z. k4 j; o+ ]& ]# D
</div> ; a& c8 P- [/ e. r; e
</body> - \  m2 q* Y* }+ v& Q" {
</html>
% [1 o+ b; {5 D) _( s: }! a& A: g) w5 p1 ]$ C  Y
百分比适应:
" }* p( R% c- M, i. [9 ^0 T2 m以下是引用片段:) R3 Y& Q. p0 R" t5 ~2 S5 V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ m, l2 x. Q: l1 ?) n4 v<html xmlns="http://www.w3.org/1999/xhtml";>
) |; k. z, d2 y' W3 I, R& O<head> , }8 n: I4 Y" q# B5 [2 k
<meta http-equiv="Content-Type" c />
* M5 h4 S& k: ]0 @1 \/ r0 r# o<title>css2.0 VS ie</title> 7 s  C' r  f; h- ]/ J
<style type="text/css"> ! m$ j% _9 d4 x- c' F
<!--
, r4 y6 f& A! i6 C2 Fbody { ; w. q- T9 l) ?: D2 b5 C
font-size: 12px;
7 u& n1 q* R) i- ltext-align: center;
  P' C( b6 H& d4 R5 Kmargin: 0px;
. Z; ~8 `* \, Z, b9 i5 ~* Npadding: 0px;
& R$ u- i( N# ?, r# `} " u' K( [; V7 M. x) [( G4 d9 o
#pic{
( A5 }( E2 ]& m  margin:0 auto;
" n. [1 H1 ]2 h  width:800px; 0 H, e" {1 `7 q/ J" [1 ^0 H& \
  padding:0;
" e+ q; D* w: A  border:1px solid #333; 3 t* k/ p6 }( l) \8 T# E
  } ) W7 {8 S, @# z
#pic img{
, \* j3 X2 B) x+ c' t    max-width:780px;   G% T" {' |' V, T" q" `% W
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , j- U# U0 O, {" U$ h
border:1px dashed #000;
  k8 {' n# S$ L- X: o} 5 R# U, E+ ?2 U* E& w: E
-->
1 }- C# a1 x; ^! n</style>
, U4 ^  M& Y' U9 ~2 ^/ R- M  d0 o</head> ' p: @3 P7 ]4 o, f2 N
<body> 0 `, O4 Q& A; M# A1 D  Z& \
<div id="pic"> , W" U9 Q& n" t# U
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> : A+ Q. z7 {0 w7 X
</div>
  i  N: U  p* [</body> , }/ w+ U8 I! t- k  w
</html>




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