标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
r$ I) \0 H! p
关键在于：max-width:780px;以及下面那行。
4 U w5 K% l7 m
固定像素适应:
' W+ M# R1 |4 j
+ O. w5 ~+ u' P6 Z
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> 以下是引用片段：
. R# D! s$ {6 T/ x! T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 ~* e9 p# ^' v' W6 S
<html xmlns="http://www.w3.org/1999/xhtml";>
' b, x4 v$ [# B* a5 Z+ l
<head>
+ m+ Y- P$ e5 J/ A) M
<meta http-equiv="Content-Type" c />
8 n7 Q7 }: E6 v; l6 v+ b& Z
<title>css2.0 VS ie</title>
6 O" f }& Q$ p# `% l% a
<style type="text/css">
% o* x! W3 b9 @+ \9 c3 v0 F9 {4 ?8 H
<!--
# B; I# N, r* ~; s
body {
! c, g; |$ D" U& n
font-size: 12px;
4 [) T4 z. S$ F6 A- h. v
text-align: center;
1 A7 X y& w& T( `* H4 l& {# C3 g
margin: 0px;
* }7 E* A5 Y5 H3 m. t& q8 p. n* W
padding: 0px;
6 b; [" i ?1 \. ~4 g5 G& h
}
: t0 ?! }8 |* i. \2 u
#pic{
. s* x# b- s4 _3 v' A8 L
margin:0 auto;
* |& f, S Q: O& m
width:800px;
- o- D1 g4 t/ e2 @7 x
padding:0;
1 I0 S- I l4 B
border:1px solid #333;
4 \5 s. R$ P# u; r/ G; L9 d& F3 I
}
% V2 f1 d/ L. a8 I
#pic img{
A! i% V6 o1 Z2 \
max-width:780px;
# w1 K% [, o- B# A: I) p
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! s* x) F/ E% G$ u
border:1px dashed #000;
$ }/ [, [1 x4 m0 A
}
1 j. @0 m+ r a! F4 N
-->
" S0 A- E" V3 D0 G
</style>
: F! G4 V) x* q% U( z
</head>
. q/ z* S! c1 w9 E( p5 O
<body>
7 @6 s, w- E* b4 Y
<div id="pic">
3 U) A- B: I6 E0 k
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 d4 q7 T1 U- Z4 G/ w7 P+ k
</div>
7 z+ N3 n% R9 f9 R! y
</body>
" d E1 F* D/ O
</html>
9 ^; ?# b" a- }+ \7 G
8 _5 O; p: N9 m; z7 E; h1 c
百分比适应:
' X& V/ R. F. m/ Q0 P# `
以下是引用片段：
% B6 t8 [$ n& {4 c" I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- _5 G; l1 h1 r/ R$ |, }) j
<html xmlns="http://www.w3.org/1999/xhtml";>
( g- [! P P: ? R+ _1 v
<head>
$ U- R n1 W4 Z; H1 W O7 W
<meta http-equiv="Content-Type" c />
4 J( d2 W; i; B0 g* `# _7 }
<title>css2.0 VS ie</title>
$ U1 D$ _! z$ N( R: j n
<style type="text/css">
+ x8 u2 H: g s( c
<!--
) R( c+ e& ^1 f# G
body {
$ O* b* _0 e' l0 v2 A: @! `7 l
font-size: 12px;
S6 d1 N( T- X4 I$ k% m7 `8 e0 s
text-align: center;
+ ]" q# R3 t2 Z+ Z0 Q
margin: 0px;
0 n5 J0 L, N0 H1 l) b8 F
padding: 0px;
; j W/ T" h: m
}
( r+ F7 x; v7 z i) _0 K
#pic{
$ q7 i' [6 s$ c; U4 G
margin:0 auto;
9 i+ u5 x7 e# }# \8 X
width:800px;
3 x& s& t( [8 L# Q
padding:0;
2 S- i7 D; D' U* r u. } d
border:1px solid #333;
3 R/ R3 |) r. o4 f
}
) f. J4 w$ d) H9 g* b. H! S
#pic img{
N5 m7 z% s, }
max-width:780px;
0 a8 q) \0 h, ?7 |# k1 P* C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 \. V4 w& i/ p3 K
border:1px dashed #000;
: x: t* n; G7 I% S
}
) O( Z$ M) l1 M B/ F6 K
-->
6 y$ M- R' b, y% j% r( s' q8 u
</style>
3 E$ C$ @5 w6 c* ?
</head>
1 Y8 \0 @7 x; E
<body>
# a* g' t& N* U* [8 x' Q
<div id="pic">
, S! `" @: X$ k F5 ^" ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# ^, a" z4 C$ }3 J
</div>
& q& H3 j' r, Y$ T- u/ g0 a( Z
</body>
* y( f9 ]) U6 R' o! f1 d
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
