标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ B2 J/ I( W: Z. b( A
关键在于：max-width:780px;以及下面那行。
3 ?$ y* v0 r- @6 x7 b5 O
固定像素适应:
) C0 o5 q/ W% P8 Z
* }! h& G* [ Q U0 @3 q2 ]
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> 以下是引用片段：
) S$ J+ g( Z; ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 g/ V& A7 P: g8 o( b O+ \; [
<html xmlns="http://www.w3.org/1999/xhtml";>
% V* h2 g0 d$ \# g" }( }+ E
<head>
6 e9 q; J. ?& W; d
<meta http-equiv="Content-Type" c />
& K* P% \8 D7 {& V6 o) y
<title>css2.0 VS ie</title>
9 v {! q) E1 c' F- h8 Z
<style type="text/css">
. Y; I# X6 \* j+ L
<!--
0 z9 M/ B$ l6 H* T* [/ Y
body {
! K( h( F: q8 W8 Z6 `' t
font-size: 12px;
! a) m2 o& E# q4 i' T- T' o
text-align: center;
! t" s0 H5 }) q5 D! `9 U' |4 h/ H
margin: 0px;
9 `5 m" n) L! N6 B0 ~9 F, @
padding: 0px;
$ }6 L: V% S/ w3 a! W+ N; t$ l$ j4 ?
}
i |0 K# e: b$ F C! L1 V* `
#pic{
' |. Y7 q% j$ ^7 a9 I3 ~9 A
margin:0 auto;
, X7 x! X6 h. F2 o0 j; e6 Y6 T
width:800px;
C2 z' ~( p) H4 h& k
padding:0;
# A; S2 N- u2 [$ D: F7 b
border:1px solid #333;
4 R& B) Z L0 E+ s
}
- ~. I$ Z2 t1 K
#pic img{
# u* i9 d, C# F
max-width:780px;
/ z& v2 g0 k5 s, ]- e. F: v
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) h0 a, T p& e, Q9 U
border:1px dashed #000;
7 F8 M* ]8 | b4 G& K5 ?
}
2 i5 h9 ?; d- o$ C: U+ P
-->
, m' Y9 E9 W$ F$ e; n- j2 {
</style>
( L4 D) f3 V% @8 o# @, \
</head>
: p/ ^- X8 e& z c, }
<body>
7 h' v$ `9 N) b# V& E7 p. g9 ^
<div id="pic">
0 O9 ]5 p& k0 `% I' [$ u) `/ q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' V8 v) g& ]% K( c( r! V) K( y: [
</div>
( A: d5 \" R U' q* s# U! z
</body>
- H8 Y- p x% c" v2 _
</html>
2 L4 w7 s7 ^! @& t5 o1 Z: {
0 a* _! N2 ?! Y8 o$ \
百分比适应:
0 P( @" K7 ?# r3 r( y, r
以下是引用片段：
7 K' I, K7 b0 J6 [; {7 P( o* c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 j) h5 ^* k8 C- ^1 u# P
<html xmlns="http://www.w3.org/1999/xhtml";>
- ~1 {- C- y# ]0 [+ N0 h; a/ R1 p
<head>
1 p# W. q" c- R
<meta http-equiv="Content-Type" c />
. F5 i: v/ B4 f6 [ K
<title>css2.0 VS ie</title>
' H* D2 T# g- d) H( Y9 H2 c, W3 e
<style type="text/css">
4 ]" H. R# f. X2 O$ @0 N1 e
<!--
Z5 U9 I; W8 T5 H* w% ?
body {
5 O' P" E# U/ Z: y; ^. b( `0 F0 d
font-size: 12px;
& U; \( _7 w% O6 b# L: j$ o4 s
text-align: center;
0 O5 H) ^9 f3 k' |( D
margin: 0px;
9 [, J7 i+ p# V1 T1 t
padding: 0px;
, |, q0 H9 t5 K% @: G- P
}
$ q& x) m U X8 x$ B, h3 {
#pic{
3 a2 n; t9 v/ ? g* ~- L7 c
margin:0 auto;
( k; P/ h7 M8 Y0 x
width:800px;
) Z: c* B: b# O7 c( y+ n" U2 f! j
padding:0;
$ d' q4 L3 s) }' l- m/ E) m. N
border:1px solid #333;
' N- g9 i& C: ^7 K
}
& e0 C3 Q, ~. U' q6 s. S1 U) H* |
#pic img{
7 t/ t+ H/ T) m5 V6 t4 R
max-width:780px;
3 R- u1 h! h* U8 P3 J8 _1 L
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 F J" }9 q1 I# D/ M
border:1px dashed #000;
) j. s- c' B7 x/ n$ M8 t) K& Z
}
8 R4 P7 O" C; e4 ^( Q0 R
-->
2 j% ~* H( K4 s# K7 c
</style>
( V, k' u' b$ i' j7 B( n. A: m
</head>
; G% `1 F- t s' `& z
<body>
$ F- f, d5 j4 S5 e5 H" P& |: M0 R# i g
<div id="pic">
9 w0 k( p! B/ k
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 o: Z' S+ ?0 a$ ]# K
</div>
. W! s; N4 F( N* c+ q* y
</body>
0 {3 z+ O+ D6 @7 Q( A9 A5 p: ^
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
