标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
) S& _9 M, V* X
关键在于：max-width:780px;以及下面那行。
9 T7 e1 ` z) R& d9 B0 Z/ k/ E
固定像素适应:
, R) c) D- F) |( i: X
! q3 h5 E. V( i2 h8 Y
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> 以下是引用片段：
" m& u9 L! `, m, R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 }" o8 v6 p. a9 | R' |
<html xmlns="http://www.w3.org/1999/xhtml";>
$ w! M# F; u7 L0 w/ }7 u6 v
<head>
8 R8 j0 l+ E7 h6 N
<meta http-equiv="Content-Type" c />
) z2 j" Q! B1 k
<title>css2.0 VS ie</title>
& G/ C6 D- T9 D |
<style type="text/css">
8 q# o" L/ R O$ ]: K0 J7 `- ^5 ]# ~
<!--
# m7 | O3 j7 ?+ a! q \
body {
7 J/ v' R X4 d# z5 c# E
font-size: 12px;
: |$ g7 r8 S; U, C4 V
text-align: center;
0 w5 M% [1 k, @) {# ~: ?
margin: 0px;
4 _9 N% S$ z# ]- G/ {% a3 e
padding: 0px;
. M5 H1 X% x% M8 y- L
}
: N- \# m# ?6 E( X& ?
#pic{
4 ?" a; x, }* e+ u9 u
margin:0 auto;
+ X2 K0 n5 k% D) V' o! e3 L) Z3 ^* T
width:800px;
' d% C: G& P, Q _( e9 S; N
padding:0;
8 p0 u8 e; j" F4 b8 |
border:1px solid #333;
) K' N1 q" ~& d2 Y/ T1 K
}
# \9 |; R* [/ L6 k$ s* g
#pic img{
) `4 f& d: G8 m
max-width:780px;
o; o' _3 q- ^! D& x
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% B6 v, g. v- X# Q+ e
border:1px dashed #000;
~3 S( R( n/ E1 X2 R; j- e- t5 n
}
5 {( t; N4 F) i- ?
-->
! T4 h% Z3 C; }
</style>
$ k) ?+ r3 K* l, B' T
</head>
6 D; _' [ v+ a
<body>
6 ^' T, f, x6 w! e2 W4 W( K
<div id="pic">
. d' D) f* |) z$ L
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ A1 V, P5 M) w& Q
</div>
3 q! h7 p' v# D/ {) r
</body>
2 g$ s7 r6 I* e- z. X' M% a! g
</html>
9 ]& T7 v/ G2 Q/ Z! @* k
4 M m( O9 j1 j4 f
百分比适应:
4 y7 y2 n' D1 @0 z. H. N
以下是引用片段：
# O/ k2 `; \+ Q# J% s" j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* J* p4 _! l- O& ?
<html xmlns="http://www.w3.org/1999/xhtml";>
7 T3 k- l/ E) ?
<head>
, f4 G2 A1 O3 e3 V5 a
<meta http-equiv="Content-Type" c />
2 o- x( P' X$ F8 N, b
<title>css2.0 VS ie</title>
2 W' n+ b' V. T. v
<style type="text/css">
' j1 N8 \+ \# s% L
<!--
% ]0 n1 g# L+ K8 m& z
body {
3 ~* _, q+ {$ ^& I0 ~: P6 G* Z
font-size: 12px;
& }8 @! ~8 X& z4 E+ W
text-align: center;
5 y2 s+ A: |% e D
margin: 0px;
9 Y; i. A/ {! M' o
padding: 0px;
8 R1 a3 R# H+ ^" B8 i$ B$ N
}
4 p0 p1 V0 h% l3 a2 W% h/ x
#pic{
5 {8 a* n5 }' B3 K
margin:0 auto;
: Q. i3 X p. d
width:800px;
8 ^0 K3 l1 z6 L3 I+ T
padding:0;
$ v- i* w5 o* e; C+ R, [' W; P* d0 N
border:1px solid #333;
6 \9 Q3 O, D7 X$ H; H; A
}
( o# A9 O4 o! `' P0 x3 V% x) O; \
#pic img{
0 i8 T6 ^; O/ o( C4 Y
max-width:780px;
) l {; \* J! c e& _; {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( p! g7 d+ c* y* e* f. S' j3 v
border:1px dashed #000;
. ]' ]! w6 J* N& s+ @2 {7 \1 f
}
: `! O: R" x- K0 g
-->
1 R$ }( Q2 ^5 C# N: o! r
</style>
' M( w5 s( ]. ^ T
</head>
" Q) l: d' t# p$ z R7 W
<body>
$ L2 v5 Z; w" v/ Z# s
<div id="pic">
3 @( v) }0 I5 o" p! R: A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 ~# E7 B# E7 O: s m+ d
</div>
5 ^. b% b3 j* _' I0 Y! G& h
</body>
0 \/ p& \" A" ~6 J8 h! F
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
