标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( u! |6 l! B( _8 L! c1 B. T0 L
关键在于：max-width:780px;以及下面那行。
j4 f; K z7 ]
固定像素适应:
& w2 y; X. Z1 J" [. S7 T. q/ D
5 u$ t' A2 ~2 g1 r! Q! A# P4 Z6 R
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 v; H" V$ A3 U- Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 X5 g' N* O, e; j1 T
<html xmlns="http://www.w3.org/1999/xhtml";>
& K0 g; |7 B5 o# B5 X5 K' o
<head>
- i. v. n" j3 |" |5 w) f
<meta http-equiv="Content-Type" c />
( J6 F9 Z, P% |# E5 x+ c ?% [
<title>css2.0 VS ie</title>
* Q# B9 |9 \# t
<style type="text/css">
6 _2 m K% }. t [, z
<!--
$ |0 b& Q5 C' ^
body {
! @9 ?; [4 f( J( ]: {. T# _
font-size: 12px;
. t/ ^1 O8 e# H
text-align: center;
/ u L: |; [ a% E
margin: 0px;
3 B: J& j. u7 @' {6 u& Q
padding: 0px;
0 x6 n% e0 L4 A' c" O7 q; ^
}
8 H5 H& _ C8 h! P4 ^9 a& n
#pic{
1 Z5 n5 P0 r, b8 S0 v- {7 T1 K
margin:0 auto;
3 W" f' Y: m1 P$ _2 V+ O7 _: B
width:800px;
4 x9 v+ N6 S# x+ d6 n3 `2 o" P C* D( U
padding:0;
+ h0 q" | b: W6 z
border:1px solid #333;
8 i( ]( M$ p+ a" |
}
]) N L, }9 I6 N% P6 E0 @8 A
#pic img{
% r9 p+ G' Z$ L! u9 Q: s
max-width:780px;
4 m% o0 `5 x6 a& Q! j* |
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' L' i: m$ p' y
border:1px dashed #000;
% z4 U7 b2 n% |6 p; n
}
% V7 a2 O4 r# C! l. s
-->
1 j. P! R0 {; h: U6 ]
</style>
6 h+ b& A& j7 ~3 m ?2 C
</head>
% L9 g0 _! O& @8 {% [: {
<body>
3 y6 x. D1 t) O- i
<div id="pic">
6 {* g" M8 M) D: V ]; _
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" k- E2 I9 O* i) G5 ^5 A# c* B
</div>
1 Y; E7 m6 r0 j% m' A$ ~% a
</body>
) M/ L% D% K0 b* J7 O9 D. U- R% ~
</html>
H% B9 R# Z6 M( J" Y" T7 H$ e2 g
, \# t% l# b# V6 Z( d9 n
百分比适应:
# T: j) v4 {. I% M) n) m& t
以下是引用片段：
0 ~6 B5 j/ b4 y& ?2 p1 ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. @$ ^! b J' |+ ?8 S& {* ?3 g" R
<html xmlns="http://www.w3.org/1999/xhtml";>
: n6 B( g1 A6 U# ]
<head>
( }8 T/ x+ x: ~; d \5 Y$ k! c( G, q* o
<meta http-equiv="Content-Type" c />
- U/ {5 b) ~* d* X8 S7 z
<title>css2.0 VS ie</title>
. k9 v; {3 b7 |; E3 t
<style type="text/css">
, j/ [2 y Z0 ^3 `1 G
<!--
4 P7 ~) x% I1 O9 }/ Y3 P
body {
2 v/ K! r6 B. W3 j, _0 S9 N
font-size: 12px;
# _. p- }5 O4 O0 E: Z! g0 s
text-align: center;
; Z# V/ e. x, V* O7 X& m9 s
margin: 0px;
3 a8 @: k$ n, D9 K' |' d" w& \
padding: 0px;
4 X. y1 h0 V# q8 A; \ Q
}
2 W8 V2 R* J2 E5 f) U. K. Z
#pic{
# ?, a1 y0 g' E, x9 r% a! k* f
margin:0 auto;
+ g& s& [! _7 b. K* C
width:800px;
) M `4 s$ o5 Y- j' ?
padding:0;
( ^4 w0 S( j9 E# ]
border:1px solid #333;
: \* d( b7 k; }& i4 u2 X( X6 y
}
0 a9 w; d; i$ u9 z6 [% U5 Y
#pic img{
5 {9 f% o$ w$ N' K' [+ a/ d
max-width:780px;
/ X* Y3 V* F) ^" A
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. D: E. `0 c% B& M! j
border:1px dashed #000;
& V8 `: ]; A9 x8 ~4 N5 q2 u
}
+ b$ i: b# C. W8 d
-->
& U, l1 v/ `8 ~ m: n
</style>
E# }: _) S; M. M* O
</head>
* e3 ?. `0 L2 j
<body>
: i; I# y* V8 i B( R. O
<div id="pic">
5 y r+ f# v! p& t0 `* W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 r) N. ?' z5 s% ?
</div>
, E" T! O3 P2 F2 d( C. g g/ l6 l0 E
</body>
: y, u2 k) k; U8 K9 T6 C" _
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
