标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* b9 J' f$ c* x0 Q2 Q
关键在于：max-width:780px;以及下面那行。
. V3 r. j7 f* f c' x4 L$ U
固定像素适应:
2 g2 j1 \9 `. E
$ S! \; g+ q! Q
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> 以下是引用片段：
2 ?, L% \, P7 c: g3 H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! Z1 g8 r. s6 c" ]. V/ z
<html xmlns="http://www.w3.org/1999/xhtml";>
4 u- {9 P+ M$ j! P6 g; q" I" j
<head>
9 T! u1 E d) g; X; J; \8 y' a
<meta http-equiv="Content-Type" c />
1 p/ U5 E- {& I$ }. I# r
<title>css2.0 VS ie</title>
4 W; t( P0 C) W/ X. M: H8 U6 O
<style type="text/css">
$ \7 [: f# A! v3 s/ T
<!--
, W; G- v- r& D& ^3 W; ~
body {
' i: S) V. Y) v
font-size: 12px;
H+ d$ K" j& R9 }
text-align: center;
" }. k0 d0 l. p, J' d( ]
margin: 0px;
" T9 ~9 \) G- y* W3 b2 g# F
padding: 0px;
j0 L4 o: v- I: n6 a8 j
}
3 S" x. ~( j/ Y2 m8 f
#pic{
( z" T2 x( ^4 [4 L7 Z( K
margin:0 auto;
. C6 Z. a& }' J; V& J
width:800px;
6 `- t, w L7 ?6 ]4 ~7 l
padding:0;
' l* g, F- ^, T8 Q
border:1px solid #333;
: K8 ~0 a' ^7 ^, p, B
}
5 \- D3 u u* c. C
#pic img{
1 C7 p) K+ J, @( D% C) K5 l t" ?* m
max-width:780px;
) f: y# h$ X9 _9 z
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 N" V: D3 F6 F* g: f0 O
border:1px dashed #000;
. O. U9 R W1 V) r7 J: H
}
5 P' e! u- B3 W
-->
" A6 r3 v' f6 t+ S6 {% o
</style>
! }: B8 M; x- k6 a/ n& @; Q4 x
</head>
' Z7 Y8 t1 W9 m3 \
<body>
% r2 r* h" k3 o; J6 S+ E
<div id="pic">
6 e* F! E V W- O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! {9 O; h, z+ ?
</div>
# f8 K6 h0 k( B" m3 z" w. f( U8 M
</body>
* P3 ]* ~ q( v3 d$ T _/ d
</html>
- Z( U# C. g/ H
; f1 i0 q2 [8 `: T9 h( p0 b
百分比适应:
* l1 H& [4 M" Y" S+ T* r! }
以下是引用片段：
1 I0 H; ~+ E5 x* s* E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 U$ A L& i. V) _0 n" T' ?
<html xmlns="http://www.w3.org/1999/xhtml";>
4 p7 J4 t7 X' W
<head>
5 p o# M5 Q& l" m0 X- H. k
<meta http-equiv="Content-Type" c />
! P( u, {- ~6 g' l: m$ w
<title>css2.0 VS ie</title>
+ D8 W7 @1 m; y R: J5 b# ?
<style type="text/css">
. T! c) w: F& m- e6 r
<!--
, r7 F% {4 q5 L4 x9 f8 H( e8 v0 z
body {
) `+ ?& t2 b8 W, y) k0 w
font-size: 12px;
' u8 S, T4 j5 t( f- E0 j: c
text-align: center;
1 C& m% V; y/ \. |
margin: 0px;
9 Q5 A$ M4 F4 @! C- G: m! b* ^
padding: 0px;
" o$ c/ \! S4 u; z) Q6 v
}
0 h! ~$ g+ K' b" n) G% n
#pic{
. ]( U2 m* t2 _
margin:0 auto;
0 p6 t+ r7 m: i. \: K- K" p6 F
width:800px;
3 Y, v4 K" i5 k8 K
padding:0;
* y, T" X9 Z1 F6 j( W5 W X
border:1px solid #333;
7 Q. _6 _" p3 i [( Z' t
}
9 D( V8 x% N! @+ i) t" c8 Z' |
#pic img{
1 S9 U; E( l" U, t6 w% T2 L; X
max-width:780px;
, X! m) B" e' k$ s9 u) V. S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* }7 N* p. l$ w1 F2 m7 g# `' g
border:1px dashed #000;
" D+ ]7 [- i8 R+ F' T% [& Q0 D7 L
}
- A; ~+ q$ t. a
-->
0 T$ ]) } H& b) Y
</style>
4 C5 i+ f9 Q6 D' m [0 G
</head>
1 r% g% ]; O0 S
<body>
) M. k8 {* h" J: ^( [- d" C5 a- }& r% E
<div id="pic">
7 l& v& a2 [1 x8 C2 Y% R" k
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 O9 v l0 Y$ P$ C
</div>
" j" l9 ], ^5 t' ^
</body>
) Y) f: z: a* W% e* r a3 V
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
