标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
m' V* U2 ?) j5 o
关键在于：max-width:780px;以及下面那行。
) Y5 E2 t- h ^8 w8 m! U& o
固定像素适应:
. U* {" d! K& N" D$ Z ]
: r7 m0 [) y5 _" M: b7 ?( |
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> 以下是引用片段：
: B2 l$ R' q4 j0 {. B% a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 K! v. u/ J, H/ Y9 x
<html xmlns="http://www.w3.org/1999/xhtml";>
. ]. i- N/ U4 J9 u) X
<head>
+ r0 T$ K$ n# T" r7 n
<meta http-equiv="Content-Type" c />
) c b8 Z! \* w" `% t
<title>css2.0 VS ie</title>
( O1 v; b7 J7 G, }
<style type="text/css">
- e. ?+ L* D2 p1 i
<!--
3 I0 q3 O) t/ m/ N' [$ R3 {/ Y
body {
_ R: g' q2 s& a3 J
font-size: 12px;
$ h W. e5 ?, U4 |3 n3 R0 ^4 I$ W
text-align: center;
7 a2 W' z7 a$ J( N
margin: 0px;
: B2 L; \, B2 Z
padding: 0px;
5 r) y. e. B+ ~8 V$ _0 @! A5 |
}
# W* n: f: \( D( u4 G/ x
#pic{
. V# X' `9 f( U
margin:0 auto;
7 r0 p6 g* ]3 I* t! Y
width:800px;
( I5 R* s$ m3 p3 f `5 X
padding:0;
* c' L* D4 a) w6 p7 D. o$ ~
border:1px solid #333;
) z8 ?- w9 I7 x7 Q
}
. a9 K/ {1 R; d0 O3 ^
#pic img{
z8 o) v. C" m7 {1 s" v
max-width:780px;
! q( ^4 i9 R6 }9 }1 p' }
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; N" j( f- a8 k- G: X
border:1px dashed #000;
' q" _; l1 ]; O
}
, ]8 _/ d0 g% y$ f
-->
' Z6 i9 ~( F9 c- Z5 s% M$ C& Z
</style>
/ i1 G. z- v- B, ^% ~5 ]7 O* ^
</head>
?' X/ b9 }( o; p/ G% X
<body>
( L# N4 |8 x. v F- `* ?( L
<div id="pic">
; X( w( L: R$ `, [1 D) Z# i* V7 P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, D# e$ |& y' f
</div>
M# d7 Q# }5 A+ J3 p/ Z( z
</body>
% J7 c# J& C1 Q7 ]
</html>
/ _9 N. h, r0 _+ @5 e7 s6 ~8 h
! D# j+ Q( F6 B+ c" x& U
百分比适应:
- I0 V* Q! \8 q; Y
以下是引用片段：
" U: q2 \1 Y/ {# B2 r0 }4 N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% `+ x, p) t" V0 a1 O6 P
<html xmlns="http://www.w3.org/1999/xhtml";>
_7 m# F4 h/ _, ?! F
<head>
! L) @; g9 l B/ q
<meta http-equiv="Content-Type" c />
+ [8 z& n) D3 U/ T1 R! G4 {2 M
<title>css2.0 VS ie</title>
1 G# Z" g* [% m4 h( {
<style type="text/css">
[9 z" p, u4 [/ }" [/ ]
<!--
1 z+ C( N7 x# E
body {
. M; J* R% o' K" Z
font-size: 12px;
& h$ z6 h! J. C5 `
text-align: center;
: L/ {5 v0 Z1 ]2 |; B1 B- i
margin: 0px;
9 ^: j R' H) K- ~
padding: 0px;
# y& t: ~& ~' G8 i( j d+ p
}
& i: R# b- @+ ^0 ~- {) K
#pic{
& n. g* _1 D+ J' H. u3 z; p
margin:0 auto;
3 A& h8 T. K, `+ p6 B% |7 q8 m
width:800px;
c- I7 \/ f! Y) V7 ?
padding:0;
4 N0 J! x5 ~2 R" E& ?4 A% m7 w
border:1px solid #333;
5 z! B/ ~4 y' L4 d+ ?9 W$ @
}
: ^! R+ H3 C& j4 ^* s( B
#pic img{
0 y8 U4 d7 T& _7 K" \2 e8 z6 P) t
max-width:780px;
0 ?3 A! p, Z/ `8 k1 C& q9 K
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
l# ]1 }& V5 }; \( l, ?. o7 `
border:1px dashed #000;
7 Y- Y( e, g$ q7 h9 I9 j
}
' I, B# B" F; l; A. a' V
-->
) A' x9 Q' o3 `) D
</style>
7 o; N& G0 @. X1 C
</head>
0 x$ _* M8 \# I Q5 ^
<body>
6 i7 y$ N6 `3 {2 E! O# G6 A$ e
<div id="pic">
& u& D# }4 G% g6 h N6 W+ j7 i- v
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 d) Q+ o% Q% L( P0 B2 W0 |
</div>
( A# a7 Q: \: Z$ N! @
</body>
- T, r3 `( B0 @ K% R7 ]
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
