Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。4 k+ [. i6 ]( P: w' c  U/ _
关键在于:max-width:780px;以及下面那行。
) L1 [: g! g7 Q, p* U1 v8 ?1 u4 U4 A固定像素适应:
" }- w" A1 V2 ]! E2 a, o8 h2 c$ H6 S: V) _, L
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' j( A1 I" x( }( X5 ^$ N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
# J( c6 W8 ]! A7 n6 b<html xmlns="http://www.w3.org/1999/xhtml";> 5 f$ G3 y) k% T  B* z0 Q. c3 |5 a
<head> * {6 }  i) `  l. B
<meta http-equiv="Content-Type" c />
3 i2 f+ i- D, Y. Z<title>css2.0 VS ie</title>
# n; ?; r; b5 K3 _2 F8 T<style type="text/css"> , n4 {/ P6 D5 R8 N; J
<!--
( z& p% l' Z) m- y" rbody { 3 W/ D1 _: ^% _
font-size: 12px; ; Y9 y% V" J3 S) N2 R* p8 L
text-align: center; # {5 n. L' {" w+ f( ~
margin: 0px;
9 P6 f& n" b) X* u& tpadding: 0px; - u, G* j  h- I) W$ i4 y* C, ^
}
5 g8 x1 ^1 `- F6 i4 S3 X#pic{
' `% M2 U, H/ A5 k- v3 a% E, {/ K  margin:0 auto;
  l: s+ k* B4 |# p( l" M! M  width:800px;   r: `4 c4 `1 I* H8 f
  padding:0;
9 d: ^: A  d4 X8 @+ v! v  border:1px solid #333;
9 Z. w1 E, d+ E& n5 C- U  } 2 ]8 p$ P+ X* K  S) J7 v/ e: \9 D
#pic img{ " H7 \( ^# r% ^$ V- t7 E2 T( U
    max-width:780px; , r; p0 c  u4 P, M9 k
width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' P0 x; d2 _" L5 A
border:1px dashed #000;
1 U* X, p  J: ~6 k6 E- L  d}
! w3 X5 ?8 @) E9 `, v# G4 l+ f$ \! T; b2 O-->
" @9 [- O  L7 o</style>
2 V. Y7 C! }1 n! t0 A</head>
" h3 E3 h. x; p<body> ; [! y1 h! o0 m( T
<div id="pic">
9 g! G4 n8 z6 d, N7 l4 E0 \<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> $ q; G% l7 w$ O( \5 o4 k; X6 A
</div>
/ V& U' M) s6 Q2 x0 v. p! z1 _</body> ' m4 [  F3 k6 {5 j
</html> / ?, R  \8 M0 n- y) x0 N

  t9 v5 x! H  e4 t5 c百分比适应:
. \0 M9 F, h8 W5 L- [# Q. H4 f3 ~以下是引用片段:% [! c, C9 m, f2 C  Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 `( ?. G9 \' U" @3 C5 l
<html xmlns="http://www.w3.org/1999/xhtml";>
+ }, l1 X5 O7 I- \9 d<head>
5 R" I) @" e5 m4 C4 ~6 ?" Z<meta http-equiv="Content-Type" c />
: l; E; f: `  K# I<title>css2.0 VS ie</title> : l9 b' N$ X$ X1 R
<style type="text/css"> & O; y+ U& |/ I* J& X" m
<!--
, u& p5 ~$ G3 ^4 |; j/ jbody {
. P# x& D/ @; L$ y0 Q+ C! Sfont-size: 12px;
, G) l) T( L9 Z) A3 g& d4 Gtext-align: center;
4 R- n0 H! H) O) c% g% A4 Y5 h4 ?5 I' z, Vmargin: 0px; 6 R5 ]) c: t# p% S4 ^& R
padding: 0px;
6 c% B) Q( u8 v+ v$ @) J( ]}
) F% G! C; ^7 Y% R: [" O/ ^#pic{
  L2 @( F, M7 @& X/ [1 K/ d  margin:0 auto; . B4 x+ E+ \' F8 r
  width:800px;
5 Z  m% p" C$ W7 I$ {  padding:0;
! l/ Q; B1 p+ Y8 s( F/ z  border:1px solid #333;
& X+ f  l9 F8 v% t1 i5 c  } * _" ]+ E) O/ \& `" v6 }9 |
#pic img{ ( K6 W3 w& h. r4 L+ S
    max-width:780px; % R& h0 o3 b6 f! @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); " ]& V; X: v3 G3 j2 J
border:1px dashed #000; . O& _; p1 J1 l' a
}
7 D- g. G: G( C# z& v- B  J) g--> + c1 j6 i6 x& b  h  _( Z% j
</style>
8 U9 Y% I, _/ ~3 L% Q# k3 m</head>
: U$ O+ S2 w6 n  i% r2 j<body>
1 C8 A% q6 J. a$ \" C$ S. M# o. X<div id="pic"> ( \/ i; J5 }7 y6 i
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 u$ `% W- k4 ?2 d* C8 ^; \& U</div> 3 b3 w0 g. l% V) d9 \- {
</body>
/ P# O9 ]: I. A) Q7 J</html>




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