标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- A3 w" e4 x) Q7 n; X
关键在于：max-width:780px;以及下面那行。
$ h* W# B0 M {4 }7 c n
固定像素适应:
) `; c5 m/ a* ]& A
- k0 ?4 L. v V! i. `) 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> 以下是引用片段：
' U% e- }2 \0 \; Y% j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, b: Y: [8 q' y( h3 W# u5 a0 T& W
<html xmlns="http://www.w3.org/1999/xhtml";>
/ w' p3 B7 p- h& F; Q
<head>
; g$ o# L" |; A
<meta http-equiv="Content-Type" c />
. K; q7 W" ^3 s+ }- z3 p4 Z; v8 C4 \; M
<title>css2.0 VS ie</title>
- t e8 l9 K. A" V' X
<style type="text/css">
- G5 ~% x) u7 d
<!--
0 ^. x, ]; j/ e9 m' R8 i y
body {
# W4 ` Y8 G0 R6 j: }) V
font-size: 12px;
9 |7 C; r3 Y2 D* i! v0 c3 O! K4 I
text-align: center;
1 g% f! k8 k/ E# H# F5 f) M2 ?
margin: 0px;
+ H! ^9 x) z* ?' T, z, p' h
padding: 0px;
' Z, K7 c; h4 ?! G# B( U6 n
}
3 `1 ^2 `1 Y$ l. Y% T1 r* M8 O) t
#pic{
9 e' v0 s5 j, @: P) `, L' S6 I
margin:0 auto;
# F6 h4 M6 L0 E/ {1 E4 {. }7 }
width:800px;
! R& L2 ]; _/ f, K+ M1 u4 ^
padding:0;
& M, U7 e/ C0 P
border:1px solid #333;
9 q5 k+ C+ i9 }" G1 I3 Q
}
, b3 I: o- X J" I" \' C7 `
#pic img{
, m. f6 ^$ l1 Y$ P- t0 H
max-width:780px;
8 o$ `& H. }- }1 H: S
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 u# j. f3 U3 w8 i+ {5 N; V3 H
border:1px dashed #000;
9 A X+ I3 A8 f; C d+ ]
}
+ H* p3 v. l1 f5 w: \
-->
6 \. _3 n, M( r( ?1 s
</style>
% J6 P5 T+ ]0 v0 h S6 L3 |/ s8 V0 p
</head>
1 y. a+ ?4 t8 z% x
<body>
8 y: w" I6 k* [9 G ]5 H
<div id="pic">
: J5 h7 b5 i! m
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, B" u7 O5 h! `. L* r
</div>
0 @3 A# n) ~$ k' g& D, ~* r a
</body>
) O* ~, e" M/ v r+ l7 [
</html>
' }: L. p C7 `- V( w; Q
4 w* x: I/ H' S/ ~+ T0 x
百分比适应:
6 ~3 f9 T6 U; p) z) u: u; }% j5 K
以下是引用片段：
& U9 t! i+ a; x9 F8 s' A% |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 N' N& u1 Z, I- d
<html xmlns="http://www.w3.org/1999/xhtml";>
O- p1 K z! o ?
<head>
) e! \9 J0 K/ P i
<meta http-equiv="Content-Type" c />
1 `) Y. n% g% d/ _; r* V
<title>css2.0 VS ie</title>
9 `& ~0 g" Z( [ d
<style type="text/css">
, O$ z2 y- K/ V6 i
<!--
7 j4 i6 ^% q+ G. D0 D* v8 g
body {
/ s% R& G% C4 K/ ~! N. E
font-size: 12px;
5 {$ Q. q3 s: A0 c& J
text-align: center;
4 V2 s* G) n5 r) S6 a
margin: 0px;
% j5 E2 a" v. t# U4 j2 r2 O
padding: 0px;
" \& _ F5 W6 G6 ]8 R2 x ~6 r
}
( O5 Q) A3 y r4 a0 f
#pic{
g$ K+ k; V- [$ F, S
margin:0 auto;
1 s" f+ Z7 F; K5 `2 o2 n
width:800px;
6 x7 b+ b! M5 C( r
padding:0;
$ g5 d. j! `; W- {. \# ]
border:1px solid #333;
' O# s' K1 i, s, {% e
}
+ A$ f9 u+ B8 }) P6 n9 K# Z
#pic img{
/ e8 O9 a! @$ O! P' _! ^# P
max-width:780px;
! V4 Q8 l2 `" W# A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' o; t" l: [! v- }7 s+ Z6 w4 @2 c
border:1px dashed #000;
, }, ?4 h& w+ _- \
}
! o3 v" ?+ G: k1 H5 N- `. c
-->
9 a2 q1 o f* {! B$ K# n. d% u
</style>
% u( z) ?" E% U5 q' P" R
</head>
; d4 U4 r! H" E- r
<body>
% o' t- G. o) r) q
<div id="pic">
9 r/ Z: @' t; z- J# n
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 K1 t" [! x7 @9 ?, l* |
</div>
- @4 p+ t& N% g* G8 `' i" E
</body>
$ r7 p( K2 d ^8 s$ M& s5 ]/ K
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
