标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! E, d' n; m5 b4 Q2 Y+ Z2 \
关键在于：max-width:780px;以及下面那行。
: ?) P: `/ |7 p! o* V) J' Y
固定像素适应:
0 i) u2 Z. W. Y: E8 ~* U7 ~6 }
% i6 H& x8 A4 A! g+ K) A
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> 以下是引用片段：
L( d. w( K- {$ K+ Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 `( `" a l* c. w( c
<html xmlns="http://www.w3.org/1999/xhtml";>
- r9 h/ A+ V( h: W; V
<head>
- G" e6 F; W# y/ S6 C+ S5 s; l
<meta http-equiv="Content-Type" c />
2 o6 d* @8 c$ O# r: A1 L7 B
<title>css2.0 VS ie</title>
- ?1 L: q f! x) L2 y2 G) f$ t
<style type="text/css">
6 K( A. I7 L% l: \
<!--
7 X; U+ m# m2 d8 H+ H( s3 D& ?
body {
9 F) p4 a) `5 C$ K( i7 `
font-size: 12px;
3 J7 q- D) h/ I9 M: S/ T4 C3 @
text-align: center;
0 r5 n3 E! X$ J, p
margin: 0px;
9 G; n; H. w8 S. b# X
padding: 0px;
$ q, a1 \1 i5 I( e& @* j" U2 H; T9 z
}
. t8 P+ m. U' x+ }# [; W0 p
#pic{
1 u! \- G0 P4 Y5 ^; M0 D
margin:0 auto;
+ s! ~ ~" z% V
width:800px;
+ m7 M* S9 p Y" ^" \
padding:0;
4 e, _# I: E: w6 w4 ]6 `; y" o
border:1px solid #333;
$ _5 p7 F' G, ? z6 T5 J8 Z s$ i
}
, K- Q K, ^0 A6 A) U) V% J
#pic img{
8 u3 [( E3 ]2 u3 Z
max-width:780px;
! u- E* u% ~$ ?2 H* j* `1 _9 A% s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* G1 u# e2 ~% \# N' r6 |
border:1px dashed #000;
6 S2 ~5 g x# k& a+ s; g; x8 \
}
$ @, B B! w0 d2 R; g1 N4 g
-->
4 e, @) b, `/ W7 U& F6 C7 @2 |
</style>
6 z5 z2 C. }4 H$ p3 J7 z4 I: ~
</head>
& c& N, |5 l( D/ T4 S
<body>
: e# c0 t* C. \; f w. k) W
<div id="pic">
8 L0 \" A7 j- O" Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 `5 T- Y8 }+ c
</div>
1 ^1 M# ^4 c" V! ?' W: x1 L
</body>
* G& E# W+ [4 b2 |
</html>
. E0 U; n0 ~9 p
) t e" T7 W' `$ ?! B1 ~# J
百分比适应:
8 d7 E. M/ }9 l5 H* T. S
以下是引用片段：
, C8 D& Q2 B5 D v" ?/ v& m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ I+ F0 H" Y6 P" B W% Q/ `
<html xmlns="http://www.w3.org/1999/xhtml";>
- s* R; h8 p( \6 E7 v
<head>
0 C3 y# I/ q3 ~, P3 A" Z) `/ B
<meta http-equiv="Content-Type" c />
2 y' a6 A1 y7 Z/ i" g$ C0 f, ^
<title>css2.0 VS ie</title>
. P0 C+ a! X1 h6 M9 e- b1 E
<style type="text/css">
0 @' U( d9 _) o/ h- _- T
<!--
4 L) W G, b9 `3 L" B2 q
body {
9 A/ o$ z! e, |, [
font-size: 12px;
; {4 l0 f/ x. w
text-align: center;
: J! O1 X8 y( C0 t9 f: D
margin: 0px;
# b- w5 f' l# U1 m) b
padding: 0px;
$ W2 H9 g) g! e
}
+ r! m. G0 A. a" R; U) P
#pic{
$ t3 L1 q: t- Q0 G9 V. b
margin:0 auto;
& I; m9 M* [, S8 ?( Q2 C1 n- Y
width:800px;
/ Q5 }, ]; O" s/ @# {4 M7 r e$ z
padding:0;
8 l! w7 P; y7 T3 \' O5 M% ^
border:1px solid #333;
$ c9 p* Y. D- ~7 J5 A( j) z U- V
}
4 ]9 F: t& U) w9 J, G" |$ t
#pic img{
' }8 M2 n s2 j) F9 A( O% g" j; n
max-width:780px;
+ N' \/ i5 f% {! W
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 L% \# k0 g+ Z! P( o! l9 |
border:1px dashed #000;
- D7 W5 f p; v) ]5 p' y
}
% m4 a7 d& n o! T& g Z) U6 }" H" }' q
-->
3 s/ g0 b; t) f- l. y5 ^
</style>
# e* d8 y) \* t
</head>
1 r9 V+ d0 d1 A3 B
<body>
& Y( a* _" r0 N( f7 Q" }5 h
<div id="pic">
4 X- D. S9 r L2 R) O
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
7 P7 S1 Y$ q1 ~4 S; t
</div>
0 q6 T& x& \. l. _( X4 s5 y; u% |# M
</body>
B4 L1 c" Q& b! b1 x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
