标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& C0 w3 t0 H9 ^
关键在于：max-width:780px;以及下面那行。
0 x! @" t1 a- e1 V7 k
固定像素适应:
% r) P) ?# B7 x3 K/ ]3 [, D8 b
' v! F$ H6 c& E7 J
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 W2 n0 ^: [1 L1 `" H0 u
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 ]; R& S' R( n: p1 G. N. J3 l
<html xmlns="http://www.w3.org/1999/xhtml";>
- m: j8 M: L( c# B1 s* g
<head>
. X9 D" d8 X, P0 B0 y1 f
<meta http-equiv="Content-Type" c />
) x _5 T. T5 f7 a
<title>css2.0 VS ie</title>
: G" x' s9 j8 K
<style type="text/css">
% j6 `& C( v8 F$ P( p% L% x
<!--
! J, q1 ~' C9 F5 Z9 `# I+ M
body {
i, K6 @) a! @8 G1 U+ W
font-size: 12px;
" t Z, Y6 M, b" ]) X
text-align: center;
: M4 u6 J+ ]# J2 m: B1 z/ r( w
margin: 0px;
8 O' ]. K; ?0 K$ v: j
padding: 0px;
5 x6 S, b# S! U* z5 Y. M7 F9 U
}
0 R8 j# M# k2 E4 h" r& a% R
#pic{
' x1 e) I4 g/ V" I
margin:0 auto;
) j1 y1 |+ o% l8 h# _8 Z' C6 Y5 O& f
width:800px;
7 w9 n( A7 Q- |
padding:0;
3 R! \: [8 `0 Z, f! O
border:1px solid #333;
) p* `( c. l8 u% \$ t
}
+ I- u- h }9 f1 M: h j& N
#pic img{
( S! M9 h6 W8 e& x! Q: K( F
max-width:780px;
7 V) s" @, [' N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& \# i1 f: x8 E
border:1px dashed #000;
' p( S( d1 h9 {. J% c1 J" [" g' a4 F2 v
}
0 i5 m5 j. Q" j. u" p) a4 \* t3 M
-->
+ h& X- {# F k6 g% R: b+ \1 u; y& o
</style>
" h m' D. n9 A
</head>
- _; ]( B% z# X
<body>
6 a1 Y9 @6 w8 g# s+ v$ k, D
<div id="pic">
1 G0 c/ y; B, q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
n; }* }* Y- W
</div>
* e' {( ~0 A9 Q/ E/ h+ Z
</body>
8 }) Y. U, A' x' d+ b! [
</html>
2 P$ E$ d( h# }- l
: e! `4 @! J: S1 g- g3 z
百分比适应:
5 B( e# j B" w0 G
以下是引用片段：
. _, C2 O/ V1 k: h R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" I, x4 J V! |" z
<html xmlns="http://www.w3.org/1999/xhtml";>
+ z4 t3 H, Y* ?: X# [) z; Q+ W
<head>
' Z, s/ X" K; W0 D
<meta http-equiv="Content-Type" c />
+ [6 L" W! o5 S4 s5 g* m5 T% u' |, h
<title>css2.0 VS ie</title>
9 Y( N; }& A. i' _) M# J* S8 F
<style type="text/css">
5 h; r4 i$ S1 y$ N2 D: b
<!--
# e- |# W' b1 T; y" I5 P
body {
( |+ c0 n# R7 c i0 R2 O, \- ]5 b4 X
font-size: 12px;
8 W; ]' M8 _8 u5 O
text-align: center;
6 w# _. j, `) N" h# A
margin: 0px;
0 c0 K% g! ^1 d- k
padding: 0px;
$ Z3 Q! _+ }1 {1 V
}
7 S, m% `( I7 W& Q) y4 s$ ]! e
#pic{
9 G: u$ ?9 G6 a$ }
margin:0 auto;
^- k; R+ W6 O" \2 h
width:800px;
8 @/ C/ t5 C6 y7 U( f! o
padding:0;
7 q( O# C5 ^9 o7 k
border:1px solid #333;
4 F. n. ~% Y" r% w
}
& H7 s3 W6 x* ]: x
#pic img{
1 P$ C* ?, n; m$ ~! U4 w8 H
max-width:780px;
6 v6 c' o! l6 L2 Z- n) o! p+ c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 ]% ^; \' |3 g& c# G2 V
border:1px dashed #000;
4 @' p1 ^) S; N, V9 r9 |. b
}
0 g3 o: z5 J: G
-->
2 `$ `/ F- m/ F' @: }3 A) m
</style>
: \2 n$ b h5 \6 G5 G/ o2 L
</head>
+ c# S2 \0 e" K9 K- y
<body>
1 s: N. |3 o( c# A7 X
<div id="pic">
* n* b& D% ? A" ^3 @
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 k4 S+ k- s+ R/ h5 l
</div>
& \: O* w( A: m# J8 T: i
</body>
. Q) f$ d9 p: v& f2 r% E
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
