标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' K+ s: d* Z$ C+ C5 _
关键在于：max-width:780px;以及下面那行。
% |% o2 C# B6 Z* V% T" I: ?' ?5 r
固定像素适应:
# g1 G2 G9 |$ Y1 b* A
7 ?$ |2 R2 F& T) m {* u6 I
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 F, Z" K! v. B% ~6 c" e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' O! |1 {/ _, L
<html xmlns="http://www.w3.org/1999/xhtml";>
; {+ Q, a( P! z8 f
<head>
- M! V. }! N6 a' s- S$ u4 [
<meta http-equiv="Content-Type" c />
$ F7 \! k( t4 ?9 I9 E
<title>css2.0 VS ie</title>
6 k7 M, ?7 f" }
<style type="text/css">
6 v: R3 i9 R; S3 U9 ^( s) f4 n
<!--
$ O- b8 u$ s! r$ b3 x: L1 d& G
body {
% _* j2 f4 N3 E( a
font-size: 12px;
( T8 U u) j2 q7 t
text-align: center;
6 o0 t D* Y8 |& s4 C
margin: 0px;
& z7 v7 E8 L' d' M4 \
padding: 0px;
1 L( s K# S- k# b+ R
}
5 K$ r$ Q# C" S. u
#pic{
) A6 f9 l2 H0 H+ {
margin:0 auto;
" I% b: R- P6 {
width:800px;
4 J+ j! m& }: @' }. `
padding:0;
) z- |! x3 y) ]2 E
border:1px solid #333;
/ I+ `6 E6 c; T/ O- B/ Z0 u
}
: ?# B- q$ \( b8 Z
#pic img{
# Z, w* M/ M4 k' X
max-width:780px;
6 P- ~+ w9 m S7 L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 P( p2 X* }0 D1 c
border:1px dashed #000;
0 | q: ?" M: E/ k: k6 R* S& |" Q
}
& Q. Z; Z7 [6 @+ \# D
-->
: V/ k- i% W6 }9 f; Q5 D1 i5 {3 y1 f
</style>
: x6 ]( H1 K; ~+ D! B% e
</head>
6 c9 D Y0 k! e1 i) h( ^& I5 @
<body>
2 ]6 h: j! o6 o
<div id="pic">
$ Z% E- k8 Z8 w4 t1 _1 z( W& u
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 s0 C+ N T$ l1 O9 V
</div>
' H }2 |. c3 S) [6 l
</body>
- H' f, l$ b- t) d5 J
</html>
0 e3 R$ N7 D/ w0 y5 I. k d6 {3 {; `
0 B5 K$ k2 T L D" D* Z* G1 W
百分比适应:
! n# e$ b6 a4 L" r- @0 @. P/ z
以下是引用片段：
( m/ \" x" r$ O# b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& K1 d n) M% L, K. M9 P
<html xmlns="http://www.w3.org/1999/xhtml";>
Z/ m& a5 D, _! M+ U+ {
<head>
, I+ j9 B; ~% B' j8 B4 Q
<meta http-equiv="Content-Type" c />
" e- U1 a8 U; E2 W8 k
<title>css2.0 VS ie</title>
; y. u V, D' e
<style type="text/css">
2 `) Y; k! y* D8 ?) }! Z% s3 o
<!--
8 D& F0 B g$ r5 w( O7 [; S
body {
3 P* T* f' X5 B$ p
font-size: 12px;
6 j' i) O3 T9 r# \ u
text-align: center;
; u T3 P& ^# V7 m3 V6 v
margin: 0px;
+ ]: r* |6 g+ L* b: l0 a
padding: 0px;
, m$ g, R) V+ v8 @; Q& n/ o0 n
}
( }! A: |5 \4 K
#pic{
8 i! Y( h7 t" n; C3 y* K }
margin:0 auto;
[& C% I( F5 e
width:800px;
8 O( N; |5 q5 `' M/ M2 @
padding:0;
9 f3 K9 Y3 D$ I0 d% z, ]
border:1px solid #333;
- P f7 K- v: z# F
}
% ?! t% O! k2 d! ^8 s
#pic img{
4 W% P- r4 `; m c
max-width:780px;
; |6 Y- l. J0 C( @; X8 S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 g. \" o) u3 S- F! o
border:1px dashed #000;
* l/ m. a$ i8 ?- u
}
* l/ H" `1 v9 H
-->
# t! }+ {' |& g# q
</style>
& @ D% ?: P& ]1 J9 J
</head>
% ?6 A5 x/ c* I3 T# ]5 _. w
<body>
$ d& W7 ^% G9 Q9 Q
<div id="pic">
* H N" i1 B' |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 c/ n7 X" p9 r$ M6 I* P
</div>
, d: E/ e- R. Z: S8 w
</body>
) c/ |) ]5 Y9 ^; s2 i# v6 T- o
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
