标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 M+ ?! D/ w* K7 t- C' w( J
关键在于：max-width:780px;以及下面那行。
9 y( h9 d6 X7 F2 y3 ~# K
固定像素适应:
8 d4 T5 ?4 [% `4 a8 p2 J! `. \* H5 c
& X X: l* n! _6 b6 o" l
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> 以下是引用片段：
3 J: W0 n6 J% B7 y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 G) {! y2 ]( ^4 ^* G3 l
<html xmlns="http://www.w3.org/1999/xhtml";>
( K/ W1 X" X U3 A9 h( {
<head>
c6 Z$ s# L. \" Y. k
<meta http-equiv="Content-Type" c />
, \" f! M+ g* A& u
<title>css2.0 VS ie</title>
- n0 d3 h) G* Y0 Z0 {
<style type="text/css">
7 h7 s0 L# m# O& w: j# l+ K* I
<!--
u8 D) }$ B* I" n
body {
5 G9 t. E: m6 n+ H; P5 g, \
font-size: 12px;
0 R0 C- I( h( N( Y4 \" k6 G, u
text-align: center;
1 V( \1 h8 U! c" m! v
margin: 0px;
9 f" a+ t8 X' ^% \, r
padding: 0px;
) y* @: [: l, i1 u0 ^$ Y& @
}
* k d1 p( \0 P* G
#pic{
8 T$ m7 o9 i' \$ H% e
margin:0 auto;
/ q6 j' S% i* S9 w a8 K
width:800px;
# C8 N6 ^ b" d6 O5 }# c7 T4 d9 J
padding:0;
`* M$ n9 r# D' L. y
border:1px solid #333;
( a6 B& O6 V) b1 O
}
- d3 O2 f# @9 B5 a& B
#pic img{
: A5 o- f& b2 Q% {8 i: x& ^
max-width:780px;
9 [* y9 b) }1 U6 q8 s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& |1 H2 u& x0 F( N: Q
border:1px dashed #000;
7 X2 Y. N+ u: x) ^" G
}
4 f; J0 d @. C$ y. q
-->
, _1 O0 z" z' t6 S; M8 L: K" f
</style>
. E( A1 t0 I- o4 b8 w
</head>
; {' ^ x! ?+ T/ o7 f2 M' F; s
<body>
! D! F2 u% U) [8 ~
<div id="pic">
0 J: g: X. S" L, ~0 G
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
g* T3 o3 z& `# M9 ?, U7 c; P! F
</div>
& V' Z; N( K5 {
</body>
3 f% K" o0 S. Y& m
</html>
U# e* B& n; E" n# O) p
# \! F$ [. ]& d- R+ Y
百分比适应:
5 ~9 h& G& i2 d. g' b3 @( g) O% C
以下是引用片段：
: Z9 V3 V& H9 B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 o+ g. K& t, F# z
<html xmlns="http://www.w3.org/1999/xhtml";>
) o y! K- ?; N3 d
<head>
" r7 f' Z* V- O5 `' ]3 O3 M
<meta http-equiv="Content-Type" c />
0 o; |8 @; ?+ S
<title>css2.0 VS ie</title>
( ?& y& U5 X* u# J/ h. c! _
<style type="text/css">
. Q0 `9 s# I ^. |+ m1 v
<!--
5 U9 g1 [4 ]2 I, e! z
body {
) ?9 f3 W8 F% M
font-size: 12px;
9 ?+ j0 ^ U- \' _: g6 r9 e
text-align: center;
4 Y! _) m `. e; ?" B' i
margin: 0px;
$ O. d; N3 T& n" w5 H* D( ?% p
padding: 0px;
% a% q. D- G- F A9 B. J! w
}
( I& b+ O, D7 b7 A6 S5 x
#pic{
6 U7 n$ n; k# ?
margin:0 auto;
# C/ n' Y- `7 v, g& x! T8 _0 f* N" c
width:800px;
, _! @- }* Y: p2 E+ i
padding:0;
0 k# d, D; C& H& l9 A( J
border:1px solid #333;
! {" a5 ~6 y6 D- s/ U8 I( J
}
4 m( T! T: ~! O
#pic img{
. {) p# T/ W/ ]+ Y2 q
max-width:780px;
2 D. G- a. H% p2 G, X
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- J7 q, }) _1 L! i. i! Q
border:1px dashed #000;
* e8 D# H4 j9 |: }
}
% N4 R8 n8 `$ f+ q! u) E
-->
$ c# L! X2 l+ R1 h1 y0 U* W K) i
</style>
2 U* y6 A$ P& w0 n$ s6 ^& b2 e- l
</head>
7 G) l2 W. z- ~
<body>
* ^1 H4 y8 F6 V+ X4 R% H/ q
<div id="pic">
' K7 c- y2 G% p' g" z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 B$ I* a1 E2 w3 R" n
</div>
. F: ?$ K0 N" O# q0 r y
</body>
3 \8 t" t/ W& |' |
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
