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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; Y5 [3 \# z3 F. U) @7 h& A; G5 c关键在于:max-width:780px;以及下面那行。& G( c# I! V* z
固定像素适应:
  I+ m! m  K! S7 p7 y0 p" a' K! X5 X; d. T; p5 U7 t8 ?
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>  以下是引用片段:) M( u  ^, p2 M8 M
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 b1 J* L8 N) C8 A1 k* k<html xmlns="http://www.w3.org/1999/xhtml";> ! [8 P1 }, p; z
<head> , i! ^7 h! f: g' `" @! z# n
<meta http-equiv="Content-Type" c />
0 w( l% _  \7 R/ d  T  S<title>css2.0 VS ie</title>
$ W/ M# E/ _+ z8 S<style type="text/css">
* M# G" y3 e4 t# e6 h3 }<!-- 4 N. W4 p% g% w, D* P  e
body { $ \, |6 |3 I: f4 G+ h% k. f
font-size: 12px; & W1 m# ?" g& J$ t  j
text-align: center; 7 P: ?* K" S+ J3 R3 w
margin: 0px; ; F2 a/ R4 k6 p- Y3 X7 d4 f
padding: 0px;
1 e+ X% i: `/ R* u} + ^. d6 c# N  G# F. A% Q
#pic{
$ ]. y+ Z! q/ ]5 {% _6 M  margin:0 auto; 8 L! c/ ^4 ~: w# w- A& \1 q3 `
  width:800px;
3 d; R( h: ]3 p4 w" i% X: c6 X  padding:0;
! C( g* G+ i) D3 `& J  border:1px solid #333; 7 W0 H5 g+ _7 t+ f0 v
  } 8 ?! @8 v' n/ J* `+ ^$ @
#pic img{ $ S- j2 q* O5 g* X* l
    max-width:780px;
) X7 V9 |, J8 T3 Zwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 N/ s3 r& ^1 y
border:1px dashed #000; ' p" {3 |# [+ x8 i- X; s# [" N
}
& `8 T/ ?5 W+ l) e; J: m4 n--> 9 x/ W% M( h/ P$ G' E
</style> 5 q) Q/ a1 I7 K  h  s$ k
</head> 2 }; u6 [4 C8 B9 L- s
<body>
* I) z1 [) p5 I4 ]; f<div id="pic">
1 z, k7 ?& N. v<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# ?: n9 P& @9 z" a: X</div> ( Z6 k/ B, d. F& F3 s
</body> 7 i  T( L" D8 h, x' M9 U
</html> # x7 F0 B/ b. U
. q$ @) t; S2 [+ x  E+ P8 a1 T
百分比适应:
, B' L$ Y/ [; T# a+ M) r" q以下是引用片段:
6 D% q: d7 e( |2 s; m* i<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 r; m# q1 m9 O0 }7 k3 P
<html xmlns="http://www.w3.org/1999/xhtml";> 1 F- e# i: V5 H1 W9 Y5 A0 z- }
<head> 6 v+ w, |& K( a* x( N5 }
<meta http-equiv="Content-Type" c />
( s* _  _! h. k+ c) o" B<title>css2.0 VS ie</title>
8 B% D+ y+ H4 j, R<style type="text/css">
4 H4 @9 F0 c& Q+ |2 S<!-- 4 j  q. |% p6 y6 A) q+ t
body {
/ X& B1 _, Q- z( Yfont-size: 12px;
0 ~3 r/ d0 b5 n* I3 J: X! p' P0 [1 Mtext-align: center; ' K5 L( w* U( i+ l
margin: 0px;
. ]  _  I/ F) T2 z9 Q0 E  Fpadding: 0px; ( I7 G; J3 g$ ^
}
. `) D% s: U+ |& D# g, L#pic{
; @$ b; Q8 ~* j: L  margin:0 auto;
5 ~! A; P- g4 v4 G  width:800px;
8 c6 ~+ r, U  g5 F! u  padding:0; + N0 B) I# ^6 f! Y: [$ q
  border:1px solid #333; 7 y/ Z* m4 Z2 T/ l1 o
  } 0 z0 y( o$ o4 M* e
#pic img{
$ |6 a6 y* H1 [$ ?% P$ w; M    max-width:780px; . \2 }: V, _. k
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 f- k# s- z  \( {, X9 o) ^  x! hborder:1px dashed #000; ! V) _; d8 Z+ {( y, C9 ~( g
}
" |# `& l# s8 B9 D; }9 @--> & }& X! L0 N3 |
</style>
  P6 o. H) I3 V. e1 D4 s& W</head>
( U% S' E6 P( v: q9 Q  _<body> 0 b  T8 U. f2 v5 l+ d( j
<div id="pic"> ' s8 `) N; u* C$ Q" b5 H" y/ A9 [. X
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
3 g3 i3 }3 S& ?( d8 ~</div> ; s" P$ V' z" V& I  H1 ^, b  J
</body>
. d; X1 l2 d- g8 f3 d1 U</html>

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