获得本站免费赞助空间请点这里
返回列表 发帖

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 M) O9 O" _. @+ z$ s/ o关键在于:max-width:780px;以及下面那行。3 B1 S7 R1 Y7 A, C, {3 B# p4 x" y
固定像素适应:3 @& m0 v4 B+ Q$ z  x- }

. m% ~/ V1 W/ v; o7 z6 \' @, \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>  以下是引用片段:
# z  b" f- L% p# `4 d) R<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> " P* N3 c3 A2 g5 P8 N- o* n
<html xmlns="http://www.w3.org/1999/xhtml";>
7 ?. J: y* ?  ?$ T9 |! h6 ^: f<head>
4 \" |2 j8 b+ b- U<meta http-equiv="Content-Type" c /> 9 J" S' ^; W3 E+ V; F7 \
<title>css2.0 VS ie</title> 3 H+ x+ C$ u! d
<style type="text/css"> " S2 }; m4 D& N6 p+ R5 x" v
<!--
7 l) l; w% C# x1 _, v9 }! Dbody {
5 H9 x1 C/ l+ ?* g& efont-size: 12px;
  }% h4 i. s. j( i! O0 V6 d6 Mtext-align: center; 5 c( x6 q* t- g. N  o- o8 |" k
margin: 0px; $ W* e" q0 Z/ T5 c0 }
padding: 0px;
* N2 L. ~$ b9 Y& f* @6 x} 5 C; ^# {) G/ Z8 k1 p$ o  m4 z5 J
#pic{ 2 t4 J/ D3 q9 K  K. D
  margin:0 auto;
( x# n8 j& }0 b/ t2 p  width:800px; ) k8 i# c( U5 T
  padding:0;
) [1 y$ C3 j8 }# Y1 _/ I2 {  border:1px solid #333; . `3 J0 C* e7 v
  } 2 `5 D$ j/ ]1 u7 w
#pic img{
) f2 E+ t! `' H7 W0 W3 S; Z4 ]    max-width:780px; / i7 u" O5 e. q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. s$ x. s: o  t# Iborder:1px dashed #000; # p# Y6 A, E8 g! K
} & h7 ~  X4 T6 j5 I
-->
+ y8 ], B6 x+ c( o</style>
- Z/ `/ `) f: N) X' o5 n9 w, h6 X7 D</head>
0 Q+ G# Z! r2 r6 {<body> ; Y$ P! m$ b8 K/ V
<div id="pic">
( K  z4 z& e! e8 d1 y9 q<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
7 R) j! R1 N9 S1 h, I, E</div>
7 w6 [% g9 |. ]% W: v0 P</body> & M4 g, \6 h9 r
</html> ; G4 U0 k* {9 b, `" ?3 u

8 K. R) N8 D$ Z. u" y& S7 l( P百分比适应:0 i: y) _1 k7 _6 o. E
以下是引用片段:, ]/ \1 q! y; g$ J* r$ }' w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ \8 G* C: E! J$ D7 D<html xmlns="http://www.w3.org/1999/xhtml";>
& ^/ \0 Y% o/ \2 I* A1 ?<head>
9 ]8 I6 C5 g$ z: I" ~+ }<meta http-equiv="Content-Type" c />
! U$ E; l& a* c9 m1 h) |( X<title>css2.0 VS ie</title> : R/ ]( `$ ^1 @7 R' e  M
<style type="text/css"> ! ~2 l' P# e9 M' V; I6 c
<!--
. E& z1 {; P9 B! e! g) Hbody { 4 M. {. l# C" X4 c0 @
font-size: 12px; 4 }; y* z% ?& |; B
text-align: center; 7 U8 A# v4 l( o0 b
margin: 0px;
% T1 f, m6 v' S+ P/ W. Bpadding: 0px;
9 r* w( E5 B/ D( X4 e}
5 i; B4 |+ X% E6 |- O/ [/ R#pic{ - M% L: d3 o7 |
  margin:0 auto; * B4 e4 }' S) x) P
  width:800px; ; e6 n9 R$ X4 B
  padding:0; " M' @$ `: }, I$ p) _! \1 [: S: g
  border:1px solid #333; $ F0 v9 G4 r$ r( o: w: G( H: Z
  } + U! b: z; w; B; d* O! l: g2 G6 R( k" j
#pic img{ # ~6 p! l8 U* k) A
    max-width:780px;
6 ?! D% G+ a& O1 wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 m+ v/ g0 ^4 cborder:1px dashed #000; * \+ L0 g! q* L* n
}
* q7 q/ G" N; B--> 0 y. t9 k0 Y5 X
</style>
' _% A$ o+ K3 H2 F: ~6 {) v  l</head>
) G! v% o% v# V* n' B; z6 t6 y  \<body>
% E+ V2 z2 N" X) h, X, y# }<div id="pic">
7 N5 P( L2 _# d  X- h% y<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) @/ C, W2 o+ P, s; c' c</div>
3 [# A' d3 \3 v. u3 n</body> 9 I2 i6 _" y& X
</html>

返回列表
【捌玖网络】已经运行: