标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
; N7 E$ g9 C( M- v5 z+ J
关键在于：max-width:780px;以及下面那行。
' ?: ^; n' [- J, j, s# F% c
固定像素适应:
6 d5 M8 Q2 u( m6 w# y# q( [5 E
! R4 E8 B+ j" C
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> 以下是引用片段：
! \; A" A! f0 Z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 Z c- m/ X4 H# G
<html xmlns="http://www.w3.org/1999/xhtml";>
& ?" `7 m7 n+ m$ E& N3 g
<head>
2 N8 ~# a* x5 y" U1 k
<meta http-equiv="Content-Type" c />
$ Q: i2 z( e5 L/ }, j
<title>css2.0 VS ie</title>
$ D2 A0 L5 p, P e
<style type="text/css">
: S9 y! ?9 c# \* u- S
<!--
- T( I7 z* E# l; h! K' [- ~' C
body {
& l. a1 v3 E) q
font-size: 12px;
* A) l( V& Y; a
text-align: center;
3 U2 y& N' H4 D' O& R& D
margin: 0px;
; a- ~. g6 s1 V h! I1 _% p2 c
padding: 0px;
& A- m/ y5 I% V6 H9 N" ?' d. v
}
( t9 ~: ]1 e& d# @& h. F2 E& o$ g7 i1 I% }
#pic{
' _/ ~# N) \0 l, s4 `& w
margin:0 auto;
0 T& |! L* w; ]
width:800px;
8 j$ L; m, y9 C& z8 n
padding:0;
5 U. K/ w! m# `- G" }
border:1px solid #333;
0 s/ W! Q6 p9 b/ B: ?) F' |; v6 E' O
}
8 G. ?+ u! S+ A7 a) t9 D7 p
#pic img{
0 U/ @9 M3 z3 L5 x
max-width:780px;
7 y7 P( Z- d8 a X
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! Z4 ]) S* N9 [0 o" ~9 ]9 N
border:1px dashed #000;
0 ^0 W3 T) ~& J. O& B: e
}
8 V, K3 U: F' b& r3 V2 n- }0 K
-->
4 \4 ^3 s1 d _/ c' s* Q6 x' G
</style>
* S9 C& ^" M6 v6 B
</head>
4 \8 O) _' m6 B7 @: T+ u
<body>
) i6 s( G9 M% s' [3 r' G
<div id="pic">
( W l Q2 T7 |" t* J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 p6 d* J) i& O" b# a( l
</div>
) u( z6 } q' X' A
</body>
3 G x( f% t0 o' N% d( T/ E+ L5 f3 k4 o
</html>
2 o, z: }0 p' G2 B* @! J8 |1 _+ v
+ O1 B' i( I* p1 ]( n
百分比适应:
4 t( m) c& R/ Z4 i' i
以下是引用片段：
: H+ v7 p3 @7 t- q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 E) E) M. R# r5 P+ a% N5 e
<html xmlns="http://www.w3.org/1999/xhtml";>
Z/ {1 L" H) g/ U
<head>
/ o3 l3 z0 q% ], d/ f
<meta http-equiv="Content-Type" c />
o* v- K5 K: _! p! a
<title>css2.0 VS ie</title>
4 H# z1 r8 m1 b- R, \% ?- W! X
<style type="text/css">
1 j6 V, C9 ]/ ~6 @7 ~' U
<!--
" d! V/ F n) ^: b9 O. }
body {
+ e# k' w' l4 E% t8 }) \
font-size: 12px;
( B$ O3 q8 e8 @8 B9 Z+ @) S
text-align: center;
]3 A. ]" s6 `, ~, K
margin: 0px;
1 @4 `6 i0 n# x& o
padding: 0px;
9 X: d" v; y9 {' K1 \
}
2 t1 I1 y# t6 m& q8 }; G! b# L
#pic{
' f: ], ?& X9 l/ j% w. N7 i6 l7 O
margin:0 auto;
- C4 w# `+ T# t7 n# s! b: o
width:800px;
, [5 c$ T! H' s8 i/ a! ^: U% E
padding:0;
0 F8 F, d( c( Z
border:1px solid #333;
/ W" u! Z& M& r5 ]& C' H
}
: L; p+ |4 e$ ^+ u* l6 F# j; F
#pic img{
- W* P6 c. p% [
max-width:780px;
5 a5 |2 v) Q) |4 p. g/ f1 g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) I) w) G' Q: _# j: B. T6 R
border:1px dashed #000;
8 c9 a8 U$ A0 k) }( e- h6 V' ^
}
$ k$ L& ]5 B* O( q* |+ [6 y
-->
0 [ g# C5 N5 Y+ T2 _1 }- I) L
</style>
9 L Q, p: S& ~5 ~) Y1 ~$ J8 M6 O
</head>
- n7 [& a1 a* j( j) e
<body>
3 n2 ^* r1 e5 c6 U" B2 ]
<div id="pic">
7 \/ H0 p7 t* J5 @+ N) `+ s
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ y, x' o1 P4 L' S
</div>
; ?& _2 p: E0 ]" r% K P
</body>
6 Q0 f2 K/ Y3 Q2 e: A) H0 N
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
