标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 J- E1 B! `( Y$ A7 U, _
关键在于：max-width:780px;以及下面那行。
6 h. q2 b% `# I ^4 E# h, n
固定像素适应:
" a5 C/ u# ?. F3 ^" \
' p3 e( b$ p& Q$ X8 D" o
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 T. h3 Q% L; x2 T! L; m3 ]0 ]/ R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* Q: b4 S9 j7 Q, \& v/ I
<html xmlns="http://www.w3.org/1999/xhtml";>
! l+ x! g! ?! y
<head>
$ ]# G9 a9 D9 h+ l5 S1 M6 u
<meta http-equiv="Content-Type" c />
s+ v4 {7 K! r( k% n" }
<title>css2.0 VS ie</title>
1 c6 j8 j( P* L. y& v
<style type="text/css">
; @5 h5 P7 h6 t" D
<!--
7 r m" \7 A O/ A2 }' H
body {
. D7 D# g1 k9 \0 r: X
font-size: 12px;
/ H$ Q* a5 u; n" ^) l) H3 B2 n# ~
text-align: center;
$ H( `+ q! t, s
margin: 0px;
% U+ b5 b: }9 Q0 ^- z
padding: 0px;
' r: A5 B. B# w+ B
}
# d/ k1 j( Q& F& V0 w! ]+ J
#pic{
2 K( K' y' @/ g0 d8 f& l* `) H
margin:0 auto;
+ M0 o* P2 r! i8 J: g/ e
width:800px;
; O1 r6 J4 H. v' ~! A
padding:0;
8 |7 i; I7 [( r9 x/ R$ b9 F1 ]) n
border:1px solid #333;
8 t( _2 w X: |& |7 Y0 k
}
. S9 a+ r* [4 H: k; @! y$ z% f
#pic img{
& f" E$ X! U) f0 i
max-width:780px;
4 ~& t; \& C a0 {% R4 x' S
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! x. r! k0 h( E9 q1 q) V
border:1px dashed #000;
$ N4 ]0 ]9 ^( m4 r; Z' J. F* t. _% a
}
+ j7 R3 Y# r. ^1 y, _
-->
9 o6 v. S; c6 O2 b- o6 c
</style>
- t4 r# c" R- l+ P/ }1 |/ Q0 l/ p
</head>
% H' v3 M) V# K1 h# n5 c
<body>
~0 i6 G" x) x' U: g% H9 J
<div id="pic">
" S; M5 U7 L& P( c; n
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 B% U* G7 S% q/ H
</div>
6 B- k* W, y8 V/ p/ S" a1 P" J: K
</body>
: d' ^. Z$ b6 G, @/ Y
</html>
+ L3 _ S+ s: v/ Q
( p8 z4 }0 ]- b' P0 l
百分比适应:
9 q; i& d4 |' F2 l8 T
以下是引用片段：
2 o' z' g P7 t; P1 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ x; m3 \. a3 z5 C$ Y
<html xmlns="http://www.w3.org/1999/xhtml";>
& \* V9 c1 }% I7 n
<head>
# B( \+ o! ^6 B' e
<meta http-equiv="Content-Type" c />
7 ?! t2 P; \. N2 Y. o9 Z
<title>css2.0 VS ie</title>
, N# C y6 d5 m' {
<style type="text/css">
. Z3 _8 {3 B# D t
<!--
+ F$ `* e8 L" o! R+ c5 b
body {
2 A* g! n( ~2 M$ e
font-size: 12px;
! U; r$ H. y3 |1 E# I& E) \" ?% d. F
text-align: center;
3 A" [, i" }/ s9 k( S8 ]) ~7 U% b5 j
margin: 0px;
. U0 R+ [8 K- m
padding: 0px;
+ B+ k- F# {! v" e( R, l! g0 }
}
. p" `1 d x# S/ ~" L
#pic{
0 T) k& R, |! ^. k& s5 B: |
margin:0 auto;
6 D$ S+ c( d! J; F! a4 |+ ^$ v
width:800px;
- V3 G7 _. Y; g8 [) q
padding:0;
) s$ j+ z+ n5 W8 P! h+ z
border:1px solid #333;
2 k9 \! T. o$ G1 t D
}
9 _1 m% G6 T0 @3 M. h+ W
#pic img{
3 n8 N$ v3 p! b! f4 ^
max-width:780px;
: l" j6 r2 r, |3 e# ]' c2 k4 V3 C
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 M& {& R& U7 R: a
border:1px dashed #000;
) m5 J5 `! d9 d1 G0 J6 y
}
7 E. G1 q' p6 z* C$ A1 x
-->
* C( W' @, [+ @! o" N
</style>
+ u2 F' y3 D/ q' @' f
</head>
$ \1 Q1 i% M8 _- N, X: `2 m
<body>
/ E# ?6 z: @% W' C/ x
<div id="pic">
& @; m, h9 S8 q" }+ W* k7 ]
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
@& z) S/ R" W- l1 r% w
</div>
; N4 n- E0 X2 @# Y
</body>
4 y5 u; B( o% s& h% E; K
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
