标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ p; d( g( L* _: c* R5 [: Y
关键在于：max-width:780px;以及下面那行。
, k; `" c( ?0 }+ o# l' J+ P
固定像素适应:
# N+ ]/ u5 \* T4 ?
8 N/ a9 }$ s8 O: n# B( _1 `. h) F. P5 n
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 J1 \% i9 J' H
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 W. @: \3 C. j4 T! ]
<html xmlns="http://www.w3.org/1999/xhtml";>
. q5 z, z, H7 I4 |& B+ S' \
<head>
1 @% H. \& [( ?
<meta http-equiv="Content-Type" c />
( {) P5 y- j& C( Y
<title>css2.0 VS ie</title>
5 |. s9 Y7 i% G) R. Z
<style type="text/css">
0 `( r k- v& I
<!--
- ^ A' I, L) h2 D( Q
body {
/ {2 M* A. ~' z* N4 M: e; q7 f
font-size: 12px;
% v. g/ G; g- \
text-align: center;
6 n. a4 y3 Z* c7 N3 C9 p
margin: 0px;
3 N( ~7 G6 W3 f7 I0 p6 q7 D, [
padding: 0px;
& O$ A4 M" [8 i: E! p
}
. {! [) O: w8 `
#pic{
! N& y5 {3 l4 y9 F: S9 l
margin:0 auto;
8 \' |1 K; N5 z% B
width:800px;
( T+ w3 g8 I3 d: s- F7 T
padding:0;
- @' m, |. @7 }/ b' g
border:1px solid #333;
) T8 i/ K, g, a6 c
}
. e" Z8 L" u. {1 k9 W
#pic img{
& E* _3 B" P1 } _8 S. @2 Q% H1 v
max-width:780px;
/ ?, q0 h3 ?2 L0 V
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 s) r5 L. U2 E, g. _4 C
border:1px dashed #000;
: `1 t( Q1 V/ p% Q/ h
}
% h+ Q: z1 N: K% P. N3 R$ O0 y
-->
! Q+ z8 i& u! H7 l( o- G. D: I
</style>
! o$ Y( h% I, S
</head>
7 C1 ]' a% W9 l9 ?( O0 d* F
<body>
! u; M/ T, |5 t- j1 l3 g# B
<div id="pic">
" g9 p+ l4 J. l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 I0 z' r0 j5 o
</div>
0 y8 }/ ~" X7 t/ P
</body>
# N9 k9 G4 u5 p6 _: R
</html>
) T* d. y4 A% e1 ?) t
- D2 v; d% `7 p
百分比适应:
* Q5 Y; z. n: e4 Q8 f' u
以下是引用片段：
+ w- ?5 ^* X6 j4 E9 x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ k) c6 n" f7 d# }( F, N
<html xmlns="http://www.w3.org/1999/xhtml";>
4 h- o2 e) ^* o& |" ?2 ]
<head>
4 y1 y5 S0 q: C3 W! m1 B
<meta http-equiv="Content-Type" c />
! U% N" k% {) |& E1 g* e, o
<title>css2.0 VS ie</title>
( I- M5 ?! H: `* Q) S
<style type="text/css">
: `' @9 ~: ?' ^4 Q. K
<!--
. u. X! i" L5 k7 s
body {
0 O J- N6 \5 l% ?: v2 w0 E
font-size: 12px;
/ _9 s* ]* _" L! r# y+ Z! w
text-align: center;
; d9 s7 }% Z, I1 Z, C3 _
margin: 0px;
) G3 i7 r. f. _' |. X8 S- ]9 H
padding: 0px;
3 h& v- M$ \" G. V7 w: Q+ G9 N
}
: p& `2 y7 F# f
#pic{
5 w A1 \, \4 |, j! E" d5 p( K
margin:0 auto;
0 J- `# c6 [6 S& u3 W
width:800px;
0 A( Q5 Y" q+ o
padding:0;
; S* @: I- {1 E/ o* O0 ?: d- P) o
border:1px solid #333;
$ `' r8 s, }. J+ y3 e
}
- u$ e& j% V3 R; j6 w5 s6 @2 w0 J
#pic img{
\) ?/ R7 q% P; y1 X g9 e& D9 J+ B
max-width:780px;
, e9 n, w' s0 V. J, _+ O8 a
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- k6 b; g2 q" ^# [9 K0 ]: R! O3 e! f3 `
border:1px dashed #000;
& F7 ] i7 O7 y- ~1 U
}
! i+ y ]: @% r5 ~+ I# J
-->
7 t) ^! h/ v$ a$ {1 F- q
</style>
1 F4 c, D$ @/ L
</head>
- m7 M; t- N5 @4 v' D0 ~
<body>
; {) i o1 V4 R2 y
<div id="pic">
. g. v& r: b% `+ `% @9 j% k9 w
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, H4 u' l, w6 M, S/ x. n8 W; K( ?( I
</div>
2 S* `$ h% P b2 q* R$ e
</body>
7 z5 d2 U. B; Z' J/ V' S6 n$ A
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
