标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! n1 j! F' o; A( `
关键在于：max-width:780px;以及下面那行。
8 f* \1 {% I4 A) \1 @6 k, C
固定像素适应:
3 T! A0 {* l5 v. a
, A% V; |& z0 k% k
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> 以下是引用片段：
: k5 } Y- _2 i# a. k0 Z' T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 R+ X* I% p, U2 m
<html xmlns="http://www.w3.org/1999/xhtml";>
; q1 G2 R0 x H3 t, ^/ V; w+ b1 W
<head>
3 F9 ?1 z% c' h# l
<meta http-equiv="Content-Type" c />
1 ^0 K! Y6 y K& L9 b
<title>css2.0 VS ie</title>
( N. l4 h! \% l( H
<style type="text/css">
3 m6 p6 n1 X7 H4 I0 O% |2 i1 m
<!--
5 D# J& P" k! m% p i
body {
0 T0 @6 k0 M0 x9 r- F W
font-size: 12px;
: j( L5 r% C& V" J) T
text-align: center;
8 g- I4 l/ x/ q& g2 @
margin: 0px;
6 B" p* j1 c# v* p# C2 v8 u9 Z8 E
padding: 0px;
) `5 M. \/ g; R9 B* r5 @0 l
}
Y& ^- X0 f2 h. b# g
#pic{
2 b9 G" {7 u: Q7 I& U) v/ G8 U
margin:0 auto;
8 |3 C( C& N. i) S
width:800px;
, ^2 C1 J$ m$ w5 @% z
padding:0;
8 E: |3 P. c3 d+ z
border:1px solid #333;
$ `& Z0 w0 o+ f) w( @" n% W: B$ o
}
8 K! P" o' k7 T' J' Z; O( P( O
#pic img{
0 l5 Y) K/ y6 p2 l/ S$ V
max-width:780px;
6 s1 }6 v; _, b% A6 u) F
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 O5 n/ I. T# m: V$ a" B. @
border:1px dashed #000;
/ ~! y5 ]0 f" o6 C1 U3 B8 r
}
+ D6 a9 N; W) I; K/ i( K: B% z' q; b
-->
- c8 d+ t* }( V8 k/ J
</style>
% \/ c- S3 ^# X, c
</head>
% g) U! [# L8 k" Q) `8 t2 S
<body>
4 u. J& V9 [ M& {: X
<div id="pic">
; Z) ]6 f2 ~5 W$ |0 V( h
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& ^8 d* I6 m- h" j" C7 k
</div>
9 T! y3 e" D4 I) I, ^$ V/ B- x4 |1 D
</body>
( n) ^( D1 M# e) Q
</html>
+ T \4 u1 E2 q" G; f& s
4 w5 h# S2 G' P- r
百分比适应:
: Q+ D, X0 N( {6 \
以下是引用片段：
9 o( a# ?$ k+ V* I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 N S7 z( B' o# t W& X
<html xmlns="http://www.w3.org/1999/xhtml";>
( f6 F# s8 p; Z) n
<head>
7 J$ e j4 ^. f4 T
<meta http-equiv="Content-Type" c />
: ~+ s3 }/ Q# k
<title>css2.0 VS ie</title>
* k' ^: q6 ]) X- ?
<style type="text/css">
5 u- C# {1 L' T! W, R5 q) ?
<!--
1 V6 N4 t) `: v# G
body {
, c c7 }+ m% A# n
font-size: 12px;
: _# _7 }6 t K$ ` I" E# q
text-align: center;
* E, x, Q/ f3 n U* V3 \
margin: 0px;
) v2 e" a9 @: Q) I
padding: 0px;
/ m( H1 u1 A7 ]" }: i: C8 H; O
}
. [$ z) w" j! E# H2 p
#pic{
: j* {. I/ p9 m$ z& v7 u
margin:0 auto;
" O Q% H+ \& U$ o$ r
width:800px;
- g' n0 r1 d8 y! g( L: ^
padding:0;
. y% u# N! q2 V4 x) P. l/ a
border:1px solid #333;
: z$ v7 L. V4 ^' d: F' f
}
8 C. G d- o( |2 \% i! ~
#pic img{
5 e: M% a/ P* d, o
max-width:780px;
9 v6 V/ x3 _1 q1 U6 l' m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& B1 ?/ s7 J) O
border:1px dashed #000;
& v2 t7 w& K- t
}
0 R9 C; k0 E N
-->
0 J& F' Y" [& t7 E* x5 f
</style>
2 B Y: S9 ]' q, b$ W, [
</head>
9 P) e) i: M! p O* h1 X( O
<body>
* L& u* Q' q: y% X. i" S
<div id="pic">
# @) q, ]% }0 V2 f2 G
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 }, B# q4 q* X# e2 z4 s4 L
</div>
7 l. J g3 P4 j& Q6 W. X) u7 P! w
</body>
& r5 K# ^) s5 t* b3 e& G& ~# H
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
