标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 z, F2 T1 G8 p- c1 A: I
关键在于：max-width:780px;以及下面那行。
/ V' W& Z# s! n3 _: C; {7 {
固定像素适应:
5 d- q: }+ T3 w- i" Q* e
0 H/ g0 N2 C m/ F
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 ^; W! v) u9 N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" ]! z' u2 g+ v. e0 y5 _' Z( c/ q! |
<html xmlns="http://www.w3.org/1999/xhtml";>
0 i* v2 {) l+ G7 _
<head>
$ l; m8 x, N+ m! S% F Y
<meta http-equiv="Content-Type" c />
) w" B( H* U) k
<title>css2.0 VS ie</title>
) ^" y% z8 B/ S. t0 s9 e, F* U% j
<style type="text/css">
+ ~$ v- ~+ [4 i1 y& \5 _
<!--
) L) { F. h; _% K$ v S
body {
( `% y) r/ y' |' t; T+ }4 p& s, u5 H
font-size: 12px;
4 y7 B+ w/ _& q( i2 m
text-align: center;
0 ^- ?- D. f: i; v
margin: 0px;
# O( P0 k" j+ ^! D# ~5 b6 m
padding: 0px;
/ P: J. N4 M2 k/ N5 r- g( D
}
7 ]5 C* w6 w! h. U% e
#pic{
) V: G4 E& ]+ U' @
margin:0 auto;
& S M) j- h" f, N3 A+ o) M
width:800px;
- z* \ l( C; {5 b1 z' G. H# a( f
padding:0;
( ]7 }* w& M) N* f, K( ~# s( w
border:1px solid #333;
/ [8 z- u* `/ L! O
}
\9 ?. \4 K" d* @4 b3 O
#pic img{
7 f$ o' Q% ~. _: a% H1 J
max-width:780px;
( L+ f( d: q! I: _& q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
* C% t8 G. e1 f* |
border:1px dashed #000;
% t% q* U% E+ ~4 f
}
5 D* a& q6 x k" Q
-->
4 B7 r9 q. v0 t* [6 B/ z$ m( C
</style>
( X4 J# X1 E( b7 D; g) T0 D: Y
</head>
0 Y2 m$ X( _; \$ l/ f
<body>
: c0 G: [( A8 }0 |2 n0 h" ]
<div id="pic">
" t% H5 N1 U. s+ ]; g
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 m+ D) w; b, B3 B! n
</div>
6 y: Q4 z( a; {. X
</body>
. Z) b P( q' k$ D2 ^0 l, T" t
</html>
8 f* b7 L; K* V& d! U7 s
7 _4 h% {9 j" H& J
百分比适应:
. ^7 ]% B7 g5 _) ^0 O- I4 c: c
以下是引用片段：
! B) l$ n2 a; s" ^" [. B: Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* i! _! O+ u5 Q
<html xmlns="http://www.w3.org/1999/xhtml";>
Q" d5 t6 t6 g: g
<head>
* E& L: H I$ c$ Y/ F7 g
<meta http-equiv="Content-Type" c />
5 A5 y! r6 e& R5 \$ L
<title>css2.0 VS ie</title>
% ^9 \' [2 f/ l( j7 E
<style type="text/css">
/ F$ K* Y, Z n/ H
<!--
- t5 `6 S2 H; S* F- h/ P0 ~) U
body {
& A) g! z3 B( b* W% ^2 Z; W
font-size: 12px;
8 X% Z$ B0 a8 u5 H `, S
text-align: center;
1 v1 F4 A L$ E9 f* Y% A
margin: 0px;
% j9 G8 A, R2 H D& b- s
padding: 0px;
! i. U/ S. s, I9 q
}
( Z( y# G1 v7 t- x1 B2 |5 c% W$ y
#pic{
, O2 n4 `8 |# m6 Q& _9 p# x
margin:0 auto;
$ |7 x8 m) s4 q+ s
width:800px;
a) s3 M5 L3 F1 G& L
padding:0;
: \8 {- q" N( x6 S9 n
border:1px solid #333;
- c8 x9 v7 C9 u- S) c7 l# n
}
" v- b) E q/ Z
#pic img{
0 X" ?' v: N0 P3 u1 q. s) E
max-width:780px;
/ \ q/ @" [% A6 T; u
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
3 a" {( D: M& ]
border:1px dashed #000;
+ g' ]6 s2 d' P3 a
}
# j1 a4 D7 S% N, b7 U& d0 R
-->
! m" b1 o# V- W2 C) E
</style>
' v8 P" h" R/ _ _$ Y, y* p; ?
</head>
; _0 m% ?& c) ~5 Y2 w* @
<body>
* `& j9 T3 S* ^9 H
<div id="pic">
0 O0 ^" |! |: E. ?: j
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 @. J N! k, ~. w- P
</div>
; @1 @3 d+ ~, Q# ~2 k" w
</body>
+ c; V% P+ } A3 L+ S6 z! y8 i
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
