标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: S% r8 N! \' r* o( `! Y* ]
关键在于：max-width:780px;以及下面那行。
# Y! l/ N1 u. z: j7 J4 X
固定像素适应:
+ I0 e# i$ ^4 l( m! J
" E% R7 E( _7 N& D) Q6 ^
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> 以下是引用片段：
8 W. k: q( x. W/ m1 r$ @. n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 F& l1 g& p$ }/ Q0 q' Q
<html xmlns="http://www.w3.org/1999/xhtml";>
9 x- V2 ~: r$ y n0 a( b
<head>
% c* C& ?; K% H; E+ V
<meta http-equiv="Content-Type" c />
: J% O, `2 E# U$ J) a
<title>css2.0 VS ie</title>
1 J' [, }4 ]8 \8 y5 d
<style type="text/css">
4 G) D7 F% b: p
<!--
: k+ S0 r& m! X; a# l$ j
body {
4 D- {/ e/ F, u
font-size: 12px;
* Y+ C" O, p0 `# ]: p' @
text-align: center;
1 F3 ~0 X6 x, v9 T" N9 e! M
margin: 0px;
' D6 ^' K( q- d7 `
padding: 0px;
) I+ X4 i% }% g/ I. h5 ^: ?
}
- n$ k+ |/ g5 b! I
#pic{
; h4 Z! g( r# L9 d
margin:0 auto;
" h- `! ~2 ?- ~
width:800px;
* R( ^: h( e# g: p* M) Y/ h: p
padding:0;
6 c- s5 D" H8 I2 y6 b% Q! f5 o. ?
border:1px solid #333;
" p9 G+ @6 c1 \4 \) k4 B* } J
}
# _) M# ?0 j t
#pic img{
, l. J, u# V: W. _ h2 z& C
max-width:780px;
- p9 x w! G) X% @; l. F1 p: ^3 _
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' b- a& n& H0 A( b, I5 |% |4 J; }
border:1px dashed #000;
2 |; W, N# N% g* b6 s/ f
}
$ B1 p; X5 l. A/ Z0 G1 K! h
-->
% P# i+ U: P7 y: l" A3 m' J$ e' \
</style>
5 M& N1 u! h' K! M z: h- l p
</head>
* @' y c9 Y5 U( \+ H0 z6 [0 i# q
<body>
+ f! X+ n9 r. j# x9 z/ Q% p
<div id="pic">
1 G) O% b, i' x# o* f5 V; d3 P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 T+ h: Z! P9 b, i9 s: a
</div>
) v3 U0 p+ t2 v- U! V8 J. T8 {3 S
</body>
2 n, ?& c. K" D8 P
</html>
8 s! w+ X' V$ ]8 J' f
& ^: l6 V- h$ A4 t. v8 K
百分比适应:
; G! Y# i2 V: H
以下是引用片段：
( q( B$ e* A9 r A* G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. a3 b0 c2 L6 z! e+ N
<html xmlns="http://www.w3.org/1999/xhtml";>
7 n$ N# O5 ~; h7 j
<head>
/ I, G4 P4 O$ T" a* c
<meta http-equiv="Content-Type" c />
( j! J( a6 }, J; x ?+ ^3 ^
<title>css2.0 VS ie</title>
{+ `. m) G X
<style type="text/css">
( |8 G) g- N1 ]" Y7 D J
<!--
/ K& ?2 g; L$ I9 j9 j0 v
body {
! E$ U% K& P2 Z
font-size: 12px;
+ L$ b9 t& b) ~1 e8 E% V
text-align: center;
1 N) x W, W; o$ C! r3 f0 J- }
margin: 0px;
, S/ {( s( k8 [+ D6 G3 O
padding: 0px;
r' K) v1 F/ h# \. h) q
}
8 C. r7 R# j& ~. h+ o9 E+ _1 O; o
#pic{
# q4 |: M3 B# Z r- l
margin:0 auto;
7 P; C5 a, k4 {$ M$ d3 D
width:800px;
7 a5 x3 m+ ` Z$ l z. N0 i
padding:0;
9 n+ ]3 v4 k0 X$ d
border:1px solid #333;
2 i+ x( u7 r7 M' G$ D" a% O4 p
}
. m' Y. w$ q M
#pic img{
+ v3 T( ?6 |6 e' i1 Y
max-width:780px;
( ]6 C, u8 R+ ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 n* `, G* @$ z, }) f& z" r
border:1px dashed #000;
: u J& L/ [- q5 r
}
+ P) h- I4 q# P& s2 ]
-->
# h# X/ f$ v c# _2 F, E
</style>
7 c) z! h$ ?; l9 X- m5 O
</head>
% @& R0 K" T% G3 U/ l
<body>
, @7 B: o5 g8 x- Q9 S: b' S! W4 l, l
<div id="pic">
2 D3 @& K% [2 O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" x* r" P. w! p. I6 Z% E( [
</div>
* F$ K; ]3 ?1 S- W; I$ z/ k
</body>
) s* F2 a f8 O- t& A7 L
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
