标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- x% M6 F3 o) J$ X- D) e( \
关键在于：max-width:780px;以及下面那行。
2 R; e o! ?9 ~; z* T
固定像素适应:
1 P) t& H9 Q$ M% x3 h" P0 T, P
3 t/ K% o8 r* {7 B8 c: v
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> 以下是引用片段：
' F* C! g( _! I3 r2 y9 [' J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. z8 |: t4 T# z% l' v$ u- N
<html xmlns="http://www.w3.org/1999/xhtml";>
* S2 u$ o" i3 j* C& J( m. v
<head>
3 R2 k4 e) g" d5 x* P3 P( f
<meta http-equiv="Content-Type" c />
9 Y; R+ Y5 i9 d" x1 n5 a0 l
<title>css2.0 VS ie</title>
. l0 B1 _' I/ M7 ~% ] }
<style type="text/css">
' l y+ L* c( l) d+ Z* d
<!--
% G! d' B: j" `8 A v& d* g, u
body {
2 C6 Z }! m: @, |8 H/ V
font-size: 12px;
' P1 s, I7 T' t' k# u8 p
text-align: center;
3 r4 M6 _# H' b$ K) W
margin: 0px;
" I# w4 f% A' c
padding: 0px;
4 f; u, c0 H* D) _0 ^' U
}
0 E, t4 f/ Z( F/ G( n" L
#pic{
5 j( T N1 Q/ F( z- E
margin:0 auto;
7 } \, a7 B: f
width:800px;
2 s* V+ v+ l- i
padding:0;
5 `2 G. m1 z! G, c7 C; l, }. `
border:1px solid #333;
. |2 z7 R. e# r
}
/ h% J% C5 b0 ~
#pic img{
9 m! i1 u3 {" l1 }1 W
max-width:780px;
~# v- W5 u: W2 m. o
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 Y7 V: W* u# z" o( ^7 h
border:1px dashed #000;
& ?0 p3 d$ f ?, j5 I
}
s' Y( T; N5 H, u/ k" E3 e$ E
-->
3 x" f; N) ^* b1 B, u2 k$ M
</style>
: F$ c9 q+ q0 B+ L, f7 I
</head>
3 N p8 o1 P$ Q
<body>
2 \6 a& E+ d* n9 E3 o( }
<div id="pic">
]6 n+ J1 z+ r8 {
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. k ?. `. r ?5 J6 t1 D% I( l
</div>
6 S* \/ K+ o: g' Q( | Q# K
</body>
8 G! ~1 S6 E! t: l( ^* e* W+ q& o
</html>
& ]+ q5 y! ~4 b1 @- r. G
, t: `. w t3 d o+ D
百分比适应:
9 L3 [& i+ L( A# }) g+ j
以下是引用片段：
( t' B8 o+ T8 w: E/ Q$ n7 E5 D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ N. R( l: L- u* @' U% |8 K
<html xmlns="http://www.w3.org/1999/xhtml";>
3 U' Y. {) l4 B) X, C
<head>
5 s) t2 W; O, H# f9 h8 ?
<meta http-equiv="Content-Type" c />
" [/ R O' }( u" h1 e* E4 r, \
<title>css2.0 VS ie</title>
( M& g4 I: m9 @) e R
<style type="text/css">
3 v) F9 q5 f8 ?& d
<!--
# C. @! l9 F8 }' R8 v
body {
4 g- w- g) o7 ?3 t7 w, L
font-size: 12px;
) Y0 m) M7 p6 C& ?% h/ L# ?
text-align: center;
: c; n2 U! y& J- }, z1 X$ A k
margin: 0px;
2 t0 `+ o1 Q7 y! {: A* g7 @
padding: 0px;
- u# a1 T* v& j( J
}
$ M+ D- T& o2 m8 v# l, U6 w
#pic{
# b# l) j+ U* q: M; [
margin:0 auto;
8 G* u }( M, w
width:800px;
7 p3 ^1 a- p Q' g1 [; C+ e
padding:0;
! B! O' x5 r0 ~. ^- ?& u$ w
border:1px solid #333;
& [% ~* T9 a5 k3 B, r
}
- Y$ Y9 @: w9 U2 }3 a6 ]
#pic img{
) o& f! e1 U: V" M; K
max-width:780px;
" g" Y* z5 ~: A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ }! S% _( Z1 Z% Y/ h- M# b. Q6 d
border:1px dashed #000;
2 l7 T, C9 ~. O/ i
}
. j: k! ~ H5 i& b4 x& n
-->
C! X q: m& ~7 g# C4 ~: ^, D
</style>
! J' k6 o, T7 e7 ]1 @- ?( W5 Q8 `
</head>
# `; y, f2 {3 _# C% C9 u
<body>
! P# \; w" m" @; h! M& N4 C z
<div id="pic">
1 g) G/ J1 K0 C7 w( z! P N( i
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& e0 S: X0 l3 b$ S- E! z/ n* A
</div>
0 O' n8 ^' R. K) Q3 G' G( z# R
</body>
5 M6 B- g3 D4 c* D5 c& i& Q
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
