标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; n2 D9 ~* {+ }. Z" u2 e' p* |
关键在于：max-width:780px;以及下面那行。
$ Q+ ~ }' R3 _3 m" q' t+ N
固定像素适应:
# o/ h4 i4 v! i6 H# K5 G
$ f9 b/ Q* p/ d; l8 M
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> 以下是引用片段：
. v, O# R. [! I6 X, J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' P) j1 z0 X% z2 [# y
<html xmlns="http://www.w3.org/1999/xhtml";>
2 c2 r/ i. P( ]$ q- h" q$ n
<head>
: s8 E- [7 h" I- J2 @
<meta http-equiv="Content-Type" c />
. c. w& Q( C- m7 b# z1 _" X. A) U
<title>css2.0 VS ie</title>
5 s+ \. Y% s( S! e
<style type="text/css">
8 H/ N# B+ O/ C
<!--
( E6 v$ \3 [1 \5 O* E
body {
5 `9 h. d. T5 I5 t# r) r" I
font-size: 12px;
6 U* R7 E4 ?: t, k
text-align: center;
7 P$ ]% X* ?1 K
margin: 0px;
4 |) W; A4 K5 \6 G
padding: 0px;
0 y1 |. J+ c& z) I2 A
}
6 Q# v4 G' J2 H5 d$ Q
#pic{
1 M' `3 k+ [2 ]7 E7 |; o& L
margin:0 auto;
3 r9 p% N) |1 }% q Y# f5 I
width:800px;
# E" P/ N+ b; {1 S
padding:0;
# U' W' _$ }/ o7 z0 R
border:1px solid #333;
. r# A5 a& W0 ]) R6 }- w1 L8 ? X
}
$ L! Y6 F. h$ [: u. x( T- }3 R) \
#pic img{
$ {! ~4 {+ X$ F% @
max-width:780px;
" H) M5 J9 r/ m/ K6 T: H- |' ?% h
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- W7 n/ f0 r5 H1 ~: o, W
border:1px dashed #000;
" B8 \, |7 ]* \
}
. \' a5 `5 s- Z) t: m4 C6 V
-->
8 A7 S' l W% `/ ~0 n- Y
</style>
+ r, v1 g0 o7 D2 Q. ~1 e
</head>
6 z- ]- M3 z) i' L4 P
<body>
( f( i9 }- l6 m4 B3 t% y
<div id="pic">
3 ^+ u0 m: Q* ^/ A1 h. ]2 u; m/ r, C
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
h2 M4 ^7 k/ L S' J
</div>
9 x( W+ R4 P3 s8 k9 U- v' V
</body>
* P7 T+ h/ J7 Q6 F
</html>
$ q" g u( S' \) U: U1 T
3 ]$ `# ?" Q0 W5 @4 j. |" t% h
百分比适应:
& F2 g7 \, j6 V$ k; O; u9 R
以下是引用片段：
, R( |; l6 s1 Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 q; e) c, c: I$ r* J8 A, U5 M
<html xmlns="http://www.w3.org/1999/xhtml";>
4 K/ `* H2 ?5 J0 l& u3 ~
<head>
8 v6 I5 \5 V4 \7 j$ |
<meta http-equiv="Content-Type" c />
) K" Z7 C, _" e- @
<title>css2.0 VS ie</title>
) Y3 O, ]5 ^) N
<style type="text/css">
' x9 d; p: ?+ X
<!--
, c6 |, r, l0 p/ M3 g
body {
# G: [! P6 X w7 p: q
font-size: 12px;
: p7 S0 h5 M4 A$ m
text-align: center;
' r. W& E! k o- I/ R# O
margin: 0px;
6 r1 ^. g" v- Y5 n% N& H! s! J
padding: 0px;
6 m0 y; k& w, Q; A! S
}
3 i8 ]/ s9 X H
#pic{
6 A3 P2 r @. L, F6 A
margin:0 auto;
+ ~' z2 \) @6 O7 q; e f7 o& h
width:800px;
0 e7 N3 h& R& k
padding:0;
3 Q9 Y9 f( w; A8 t" D! B
border:1px solid #333;
& E, n. l( S) P3 G
}
0 Y7 u+ R* h0 c4 a8 y
#pic img{
3 X9 T/ C; g$ k) R2 e
max-width:780px;
! M2 J; T8 ~/ b. D1 H% _
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% w8 v4 E% ]. g0 d9 d
border:1px dashed #000;
- I2 q1 U% H* a9 u' T0 ^
}
- r" Q4 ?# @! w# _
-->
' ~+ ^, H" E( K8 A' d. I5 @' n% f
</style>
& F% o. p) ^$ s- R
</head>
1 }3 j) T& i* a' I) G0 c* i6 F
<body>
) j0 M- u6 s" ]# k& ?& {
<div id="pic">
% c, s! w" F4 Q- O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 v# {/ r) J& U, D4 L# l4 ~: x; c% }
</div>
, e, z2 F$ f1 X3 C" U0 g
</body>
; H# l3 ^- t) o. N
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
