标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 d: e: g0 s$ t+ F& v: T0 ]
关键在于：max-width:780px;以及下面那行。
/ _3 S" z: Z& S' E
固定像素适应:
$ J* z1 D5 h# G [' ~2 r- P9 v
7 j" a! A+ m u1 G8 W& J
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> 以下是引用片段：
g6 d9 E% T) J! P0 H2 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 k1 e1 K. N* `9 P
<html xmlns="http://www.w3.org/1999/xhtml";>
; L' `- X$ K# ^8 A& | _9 H8 J# t
<head>
. D' A, w4 v+ f! l1 ~' A2 W
<meta http-equiv="Content-Type" c />
; X( o3 S: u1 ^; [9 _3 W# C( e
<title>css2.0 VS ie</title>
4 ^0 R! b, |+ i3 z: y+ E
<style type="text/css">
1 ~; w* R# T0 z/ w- ?7 }" [
<!--
# f# M& T0 v2 x ?. U) U+ r9 [
body {
0 E& \: N# \' W$ e/ j2 e
font-size: 12px;
4 ]% z( k% ?: k* i, r3 }! t
text-align: center;
$ _* M0 ~! l+ e2 l9 I. v
margin: 0px;
, ^$ [6 p9 @9 R) X/ [6 n/ H
padding: 0px;
0 J9 m, ~2 E( j& W
}
9 y: B1 a8 i- Y2 R
#pic{
7 c) c- H- e: _2 E6 o3 P4 Q; C
margin:0 auto;
! m2 o: @/ E% |% G
width:800px;
9 E4 i+ r) ?' l' `, O$ m
padding:0;
: o; o# s) g) q2 a
border:1px solid #333;
4 q' T( h- u- z- D* x! p
}
% s" V+ v4 n9 i- J+ X, P' O1 r
#pic img{
1 B) q* a6 N; W; {8 |" F; {+ u# r
max-width:780px;
5 S5 ?2 q( F, k; @0 Q" ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
( D: ]/ K7 ~% o# C7 _$ v
border:1px dashed #000;
% G( v& @( ^4 z) U: [3 i
}
R0 a3 a7 A( `4 X' |. t
-->
! i* I' h5 g0 ]; \. r5 {7 Q: ]
</style>
' Q' {, ]0 T* R
</head>
( ^1 q" r- a2 r) r Q# N) e
<body>
* g* r' z3 J2 q8 W/ Q8 [# g' i# e- d
<div id="pic">
7 @ a$ J v' y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! {& l* R/ `# `6 H
</div>
5 |0 K: H* ?$ ]) `! ^- F
</body>
; I- h2 z! V7 B8 m, D/ }$ _
</html>
0 h: B# e3 e" @: p
- D! D9 h* x9 w2 B1 F
百分比适应:
: g: v' E; d% D% K# D& K& d3 D
以下是引用片段：
; U8 I* i+ w A9 b }8 F
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 b! }9 ^5 g, @% t- g ], ]' s% }
<html xmlns="http://www.w3.org/1999/xhtml";>
7 |( c% ?8 f- g8 w4 y, S
<head>
& |+ U4 Q6 L( O8 p0 N
<meta http-equiv="Content-Type" c />
3 w8 S" i$ V# ?& k$ y& c* a. l6 c
<title>css2.0 VS ie</title>
; C, ^+ U; r& [8 f7 m0 F' }
<style type="text/css">
# Z0 X. a/ A6 A% p# I, I
<!--
u7 ?1 ?* h& S4 i
body {
+ ?+ h5 H/ I$ m
font-size: 12px;
; [" ]7 k0 h! ` d3 d/ b
text-align: center;
( b, k) d$ b! w5 F' C' r' ~& A; b# d
margin: 0px;
9 o6 v/ U- v1 g/ o o! g) M5 J
padding: 0px;
D0 }, f% ?* O- F# ^6 r
}
3 A9 o9 [! M8 J* R4 O& ]
#pic{
$ _: U9 R3 g2 E3 \( p0 o
margin:0 auto;
2 p6 L, X/ s \+ }& R1 Y }5 A
width:800px;
* e V' ]) g) F0 h0 k$ r
padding:0;
" x" h$ v$ R! ]! B, E$ Y/ G
border:1px solid #333;
# G: S: x) V3 |
}
2 \+ X) Z$ n ?- H% Y5 w
#pic img{
7 o/ G* \6 @2 O- \1 [7 _$ p
max-width:780px;
/ }+ ~2 c8 w! H! w& m+ S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 g0 N5 n. Z" b* {* N
border:1px dashed #000;
~4 M# b! R- \5 W+ D( V
}
# p: o+ m+ Z6 b/ y7 k6 N# ^# |; r% j& h
-->
% a7 b0 t& s9 P% M
</style>
% ~& x! {" r. Q/ H9 u8 U/ {
</head>
" K, v& c& K) S$ ?3 K. G( p
<body>
6 } W$ \5 j) f! r v1 M' y. P
<div id="pic">
" e5 \% ^4 \; M- ?8 C9 {
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 S8 {; Z" g7 e0 ~ L# K% _ G
</div>
- ~- [9 k; ^+ G- v/ t3 M4 I
</body>
# j L. d% R) f% _" f) F
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
