标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 R+ \) B9 `( J. _1 j4 X
关键在于：max-width:780px;以及下面那行。
" }. @$ V# _% p- m. y
固定像素适应:
. a+ l: }5 V3 \% ?2 `# v9 T4 R0 O
0 v7 O7 q. w- r; U8 B0 C3 O3 S
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> 以下是引用片段：
) m' m, V9 s$ ]4 X8 A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& @* L/ K, b+ e+ r0 i
<html xmlns="http://www.w3.org/1999/xhtml";>
; h7 }7 ~$ L( Y8 L
<head>
6 g2 z. r, |% o, O
<meta http-equiv="Content-Type" c />
; m# F& S: [" a: V
<title>css2.0 VS ie</title>
1 d7 x, _" Y; [7 T
<style type="text/css">
* z" K& A* d9 R) k! ?! H$ P
<!--
0 ^% m) ?- A2 P+ R, C/ X' k
body {
' p/ u2 R; z4 W
font-size: 12px;
! J4 K* v6 w5 N$ `2 h
text-align: center;
. j) L4 G% V! u
margin: 0px;
* J$ U1 R5 w/ t2 |2 a
padding: 0px;
! _- W8 g$ Y1 A; G, W0 |
}
0 K! Y) C. J' @; h- v8 y2 k
#pic{
/ y. q; o- Z: ^% o/ P/ L) v7 V
margin:0 auto;
8 l0 h) p" }6 x: c
width:800px;
* j" m5 S, ~3 ]. Y* u
padding:0;
) G8 ~; F9 N9 `# j$ D6 T
border:1px solid #333;
B5 Z8 A4 ^1 T
}
7 L7 z" V& r3 W* g! X
#pic img{
7 ?4 B# c& x+ ^5 m, A7 d" a
max-width:780px;
3 Q8 J2 ^7 d' u- D" d
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 l! S$ I, Q8 w, W/ b4 o
border:1px dashed #000;
+ G# F9 _0 E. x% M( j( i; E
}
7 E% \0 }; Z9 O& d
-->
! J* M3 M+ M# P$ `# \
</style>
% b8 t l, H( A3 @, Z
</head>
9 u! y z* r! x" t
<body>
2 |" a1 U3 c! w
<div id="pic">
7 h7 s& S3 w( P+ z8 K& [" ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ G: R q& i6 u5 g8 _
</div>
" A6 J# g/ O7 u$ r# e' }( X Q9 a
</body>
: f0 o! g- P: C; h
</html>
/ c' r; J0 b7 \" s6 G
& W1 s! n/ f( q
百分比适应:
; u' r2 n' C" {& l. t- \& d
以下是引用片段：
8 O* E2 K3 j" v. J9 O. Q! Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 v3 a+ Y( ] X( ]- N& e
<html xmlns="http://www.w3.org/1999/xhtml";>
( ^& n Y9 l0 Y$ R/ L* e# Y9 G& j
<head>
2 y6 m* N6 D0 `8 E( o+ `3 d! J
<meta http-equiv="Content-Type" c />
: h) T/ I5 @/ o" J& m
<title>css2.0 VS ie</title>
* o% \. X3 w2 {5 r, t
<style type="text/css">
d% s0 x8 P& r p0 y
<!--
" F9 X7 g) M+ q
body {
- } S4 t2 ^- [6 I
font-size: 12px;
) F3 g' P, Z; T5 N1 Y
text-align: center;
' B9 Y8 ~4 p, a& ~, |$ |
margin: 0px;
, v1 A: j: P; A/ X- D; k# { w
padding: 0px;
O$ D1 `9 b! w4 }
}
% r3 [0 a2 g% j h; U
#pic{
! }- H* Z; C% ], h, e6 \
margin:0 auto;
. V. X/ Z0 I$ Q& l
width:800px;
; |8 `' v% K0 b1 W* Z# F
padding:0;
L% W* g+ [8 i5 h' D0 B
border:1px solid #333;
; I+ Z3 T! O. Z% ]3 K2 i* x8 L
}
* b: l3 l& w$ I6 f( Q7 R- B* M
#pic img{
0 B: a0 ^# I" ^& M z4 L2 A; k0 t
max-width:780px;
9 \' m' l3 v: X# y% m
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 K9 ~, I9 A1 [! ?3 j% r/ C* u
border:1px dashed #000;
) W/ S6 k7 F# o. \5 F
}
9 V. z z5 o5 }! T
-->
7 Z: w, k, B- q" V: b
</style>
/ W% @& |0 F. d4 S
</head>
3 \$ e( N& {6 \; h G# ]& i
<body>
4 \8 L0 G& x5 l+ B# g) K
<div id="pic">
) n: M+ }1 p% x. R0 j/ c" j( |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 Z( x* m7 N: Y% w( T1 N" Q
</div>
0 i I% O3 d1 W7 {
</body>
+ O( C$ D4 d A* z7 V
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
