标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- D. d: J5 P. L" e# e
关键在于：max-width:780px;以及下面那行。
9 e8 Y3 C5 n( u& D
固定像素适应:
, [7 c) P* e9 G. k& F: ~. U+ x
& V3 P2 g$ q( ^2 S
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> 以下是引用片段：
( x7 V. T# e( D7 l% r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. @# P% C: C: x8 [2 F5 k& n( w
<html xmlns="http://www.w3.org/1999/xhtml";>
$ z) B' m. d4 r+ e* w( {4 l7 P2 w% h
<head>
) ^( n. T ^8 d
<meta http-equiv="Content-Type" c />
/ I3 v# c# q' }6 `# W7 B& c6 D
<title>css2.0 VS ie</title>
5 V; c1 `/ z0 z' N1 z5 ^
<style type="text/css">
* c0 M& s- K6 Q5 Q5 f
<!--
; V+ D* C9 L0 d% Q. j
body {
, k9 A5 \, R9 H1 z+ t1 E B/ m
font-size: 12px;
* ^ i$ M( n9 ]& _& R% @7 z
text-align: center;
1 c1 t9 \) L n4 u( } K8 F# ~
margin: 0px;
# Y9 }2 d I' i3 Z( _7 Z
padding: 0px;
1 P# I; V' q( T2 [4 Y
}
: N% Q7 W' D2 A2 ?2 {' t3 V
#pic{
' \6 i5 q" d& _" d. M5 C
margin:0 auto;
6 Q) S" z' }6 G1 O( A7 D/ f/ K
width:800px;
! _2 Z) M: k( Y s v3 ?" l4 G
padding:0;
" g3 {. ]; J) b9 r; \( P
border:1px solid #333;
( |% S- I- ^+ k% J! R3 s! U" S
}
$ Q- C% R; ^+ { w1 r% ?6 r. n- s3 h
#pic img{
" Y9 A2 q7 l' k; S
max-width:780px;
4 J/ X7 f a5 u. T2 ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( M, N U0 m4 u, X
border:1px dashed #000;
7 _1 V* J. _# ]- t
}
5 d8 H" u2 z' X3 j N9 Y5 S
-->
. E7 y! w* A9 e! w! u s
</style>
# a7 `5 N+ U4 O. f7 B0 u1 V" |2 N
</head>
; F* f i$ j; u9 ^+ f! \
<body>
* E6 Q% I, A2 l1 y
<div id="pic">
$ x0 t f. h" y( G: S7 e: f5 ~0 T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ ?* f! B y4 P* \7 A
</div>
& H* A) o, `' l1 Q+ M# O- A
</body>
7 J+ B+ W e$ q
</html>
7 x3 L9 m" F( u
3 S' E6 O# W! W: a
百分比适应:
* d6 O9 _, g7 F, n( r1 P
以下是引用片段：
9 S$ v' O5 x$ w4 o3 _! a) c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" n. u2 |& d& ?. x
<html xmlns="http://www.w3.org/1999/xhtml";>
% d8 B/ X, } i% e; p$ S
<head>
2 \9 k% T% N) d* \
<meta http-equiv="Content-Type" c />
0 W6 f. _3 K4 N5 }) _
<title>css2.0 VS ie</title>
7 J! m. ]1 k5 a" {
<style type="text/css">
}1 k ?% m# v! K6 w* r
<!--
/ r2 r6 Q% a# {. y0 U& c
body {
/ U$ i8 I5 f0 w- T4 t, D. m! M
font-size: 12px;
8 f% Q: e i' `+ E: f( v9 @& Q& e
text-align: center;
7 m3 q9 ^& U7 |" `: D( I
margin: 0px;
" D* S* f% ?1 f+ U* t( F
padding: 0px;
: z5 L( P6 `% S& W2 D
}
& k8 Y3 z5 z2 A1 h5 E
#pic{
' Z* `6 G! R4 G1 r
margin:0 auto;
7 u6 @, {, q3 k" j6 V
width:800px;
6 h# P, C2 Z' o9 N9 {" I
padding:0;
- Z. V3 {6 N; I# [. O! [6 X
border:1px solid #333;
5 ^" Q# J C& c- z& K# a) H
}
- f6 ~8 k3 U! G9 Q
#pic img{
- h1 o) H j d; j" T7 U
max-width:780px;
$ Y: g- j- o# Y* `& v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
5 H& ]1 e: N/ ^% H: L
border:1px dashed #000;
/ C: x5 G* ^2 m4 E
}
3 F& ?9 h' t/ I7 A
-->
5 V) d" d$ J' ?2 l' t& h% F
</style>
' J# Y0 Y# _2 X7 _/ R7 o* }
</head>
: n/ M8 Z; w. t5 g8 d
<body>
0 U0 n* b) B9 s0 `/ u" B+ q7 P
<div id="pic">
# j$ P' O- W v1 f0 ~' \0 q* a
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( `6 T1 T, ?5 T& o' U5 B5 u
</div>
5 k: |4 R) s( Q% o# Q8 y
</body>
+ z7 ]( f0 z( d+ N9 l6 U3 @
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
