标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ P4 S J& y' }: _: u2 _6 A; r
关键在于：max-width:780px;以及下面那行。
% [' M, C; K5 ]
固定像素适应:
( p/ L2 Y8 E5 L# V! ~- y
5 n {" k3 s3 L6 `9 ?' S2 l. a$ ~3 [
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> 以下是引用片段：
2 j* k2 G5 N- G0 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 [) W7 R" P5 j! t4 v
<html xmlns="http://www.w3.org/1999/xhtml";>
0 Q: G6 L. P. W' Q; I
<head>
9 U0 i2 y* e2 I% p0 _
<meta http-equiv="Content-Type" c />
8 z2 e/ O1 c c5 Y' Y7 m" y
<title>css2.0 VS ie</title>
) Z! b3 U5 c9 A) m ]3 h: V1 _6 L
<style type="text/css">
/ g$ }' X6 W4 ]- Z9 R
<!--
3 l) l% s6 u; ?4 @- x
body {
* I9 B4 [1 M, J# L I) I
font-size: 12px;
! z# G+ \5 ]% q+ t7 J5 Q: P% [' U
text-align: center;
& Z" q* h, Z1 @
margin: 0px;
7 ] @* @+ ~) D7 X
padding: 0px;
; L! E: s, B' D, r$ f9 m4 S
}
8 d1 A& {- ^. r" n
#pic{
5 V0 F6 B" n3 s$ d
margin:0 auto;
3 [& ]( }9 d9 {3 \4 _6 Z9 p
width:800px;
7 l1 ~$ n( k4 H6 `! R" X# w
padding:0;
; V; C! `$ u5 l8 Y5 [. S
border:1px solid #333;
3 v' ~- f! _" R+ j& s& t
}
" X' D+ S: Z$ r6 \
#pic img{
5 V" a' z/ x( R' n# j
max-width:780px;
( ]3 o6 w: }% g$ R% A) [* H1 j5 k, u
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 U _/ f/ i2 X7 ^2 S% I2 k' U
border:1px dashed #000;
: J. ^" h( I& k$ P, T7 Z
}
6 ?' ]( h( x! y7 m% Y2 p0 t9 C3 \
-->
" w' u: B2 y# ^
</style>
% L. U. n$ q* i- U# e$ W& g* ?
</head>
' m+ [! e' S8 d# r: i0 a
<body>
# o. A" }9 f: M4 z0 S8 @( e
<div id="pic">
) a* Q0 d; h* X
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ @, @' a+ `: |0 }: a* d2 [
</div>
" i6 ^5 M) |6 F" A2 @. ^
</body>
. J$ `4 ~( ^: l6 D
</html>
$ v6 b' { l, K; l% m
! U% g( _3 V7 e* J x7 p9 f4 Z' H. X
百分比适应:
4 i* }8 j v3 g5 ~( D$ s" ?
以下是引用片段：
: H2 [" S8 V b+ t6 w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* r7 ?4 U# h( z2 q) r
<html xmlns="http://www.w3.org/1999/xhtml";>
, {' p# A/ }/ r' ?
<head>
. ?+ @( M, N: Q1 g3 T' C3 m# o3 W J
<meta http-equiv="Content-Type" c />
6 n2 P& q1 E8 R9 V: ^$ J, b! S
<title>css2.0 VS ie</title>
+ a ^' i3 a# W! l8 h/ t
<style type="text/css">
0 |% l; B3 o5 H/ S) A
<!--
, b( L( d/ \5 M$ r! U
body {
. z7 f' x7 `- |& {& T
font-size: 12px;
; b0 y7 p( ~: V; I& U
text-align: center;
3 J. Y, G ^, T9 c
margin: 0px;
( R! }7 z* ^4 b3 I- e# P
padding: 0px;
' I! H$ m. `" d- I! ]8 X$ u
}
5 ^: u X: F) s% _- B7 F% Q3 \# ?
#pic{
2 a- y7 o0 e; V4 _) V+ \
margin:0 auto;
; ~' ?, h. N6 I
width:800px;
3 Q8 C* T+ D+ w( y4 c
padding:0;
. `; l% U2 c0 s4 C# ^8 r' q
border:1px solid #333;
8 `$ H; ]: m0 s& p T9 ^! U8 \- f0 E
}
@$ F2 y: q9 |' f1 s9 F3 i: n
#pic img{
/ U0 G! N2 O, n
max-width:780px;
6 N) J- W3 d6 q$ p
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
% Y9 u/ t+ h, V9 }9 G0 c
border:1px dashed #000;
+ r( p9 ?2 s" A
}
/ p l7 Z7 E$ L. T7 {, ~9 J7 x9 S. l
-->
: Q6 o' ]& N' o I
</style>
' k! \; }. B- Q* O& U
</head>
% U8 x+ [& L5 V+ S
<body>
5 t; k: r0 J4 j. ^
<div id="pic">
4 D: i+ g. i: M) W7 \
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( w' k# V$ P6 w {" Z& w$ j# H
</div>
6 U5 B5 r# k# A3 f3 h3 q
</body>
. F, I7 O3 Z/ T1 s* t
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
