标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ _* Q4 @* M8 I7 n" [) @
关键在于：max-width:780px;以及下面那行。
9 l/ ~7 X/ N1 W( G; I6 p5 E
固定像素适应:
. P9 t% t) ?) P3 h7 l# o3 I! S
/ B) I! \% T0 H2 a3 r7 w
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> 以下是引用片段：
8 f6 K) n+ F1 y) U* m' Y4 }. K2 a4 T! _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 [5 I6 [, U$ w% W" ~+ j
<html xmlns="http://www.w3.org/1999/xhtml";>
5 Y+ j& N1 Z& @- w2 }. P) s; P
<head>
* | s2 e0 }8 k( {" q; z P/ u# f
<meta http-equiv="Content-Type" c />
2 d& K$ ~$ v8 k, `! E( M/ c/ P
<title>css2.0 VS ie</title>
7 f- s* y. Q# k4 w4 O2 N3 ]# A
<style type="text/css">
/ {+ e1 o' j$ v* M
<!--
/ Z' @$ T, X/ @% K
body {
" H9 B4 q( l8 C4 L i
font-size: 12px;
2 E) g# r" x! B9 T
text-align: center;
# n- k* Y5 B8 c0 Y3 s
margin: 0px;
. R& I) k/ s% d- R) c; U
padding: 0px;
" p& ~- z9 N' K3 N2 i7 G- |5 V
}
$ s: Q$ O; h2 k: s& f+ A
#pic{
) E+ x. i1 K/ Q1 }( z u/ U
margin:0 auto;
/ G& f. s d5 \, s! V
width:800px;
6 G* |0 k- [; A1 n$ N1 V
padding:0;
) U4 w0 M+ j& f* d. X
border:1px solid #333;
9 h( J# q8 C# n7 ]& \1 t
}
; j+ U! U! X. L' X+ I1 Y; f4 d
#pic img{
7 H0 G1 h1 I2 f4 M# |
max-width:780px;
7 n8 S2 V! f. [2 }( M
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 m) P" W5 O' ?
border:1px dashed #000;
' t$ _3 x/ S t3 A( Z0 I0 N
}
. ^7 M# s4 e2 j
-->
5 b2 J& p# O7 X7 u, b& `
</style>
, F3 v9 K! i5 l3 a
</head>
" G- T- u) S7 ~2 N! G
<body>
6 _. e7 ~1 ~. B' m
<div id="pic">
; x6 E- c+ K+ R3 u$ V
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( P- r* k8 g* U( _) E9 a
</div>
- g- F- N* k, G7 D
</body>
: K! r9 V& T* l' E h' ]8 ]
</html>
) D: u% `$ j7 i3 p8 j7 v4 N
* d# O/ {+ q4 r+ }" D" K7 ]
百分比适应:
& h) T" J: ]/ c( G! m# s
以下是引用片段：
) C% }0 w- j7 r' |- V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& X9 a9 X: U5 v* Q7 B3 @' [+ h/ f
<html xmlns="http://www.w3.org/1999/xhtml";>
% i7 u3 t9 e+ k: A" `; d! L" ~
<head>
; p* G4 W; \7 x4 w: v5 q8 g" \
<meta http-equiv="Content-Type" c />
0 M) g" u- G. X2 o
<title>css2.0 VS ie</title>
) Z6 S. o) }+ d0 S. k- Q. \' i. F
<style type="text/css">
1 R6 o+ a/ f' P
<!--
( j, ]; M% c$ \* K6 r# B+ s
body {
+ }! F8 a& `! J, M. j+ ]
font-size: 12px;
& j. D8 ~; D: V5 i
text-align: center;
4 y& Q7 \; H! g( \. v! @4 S
margin: 0px;
+ Z/ [5 z0 t4 U+ R7 n* `# ^
padding: 0px;
R0 k6 y! |+ s/ R, q2 X, Y
}
9 q; V4 @: F4 `+ ~
#pic{
) G4 ~0 N9 H/ F7 I
margin:0 auto;
- M% _- E9 |2 q, N- j; U0 l8 E
width:800px;
! `7 N: g6 O8 w6 l
padding:0;
/ K0 Z3 v' B0 x' j" D+ T( u0 E
border:1px solid #333;
' ?3 b0 f$ |& J. H2 x5 A! p8 e( l
}
% K+ P# X0 p8 ?) P& O
#pic img{
4 E" G. h7 @, l# U, Y1 O
max-width:780px;
; T9 q8 v3 w7 \8 Z0 M- u- n/ G
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) w2 a/ y! I ~8 N' H, b7 S
border:1px dashed #000;
- b& g7 P8 @) m
}
% \2 G- k5 l2 ^! i" t$ L
-->
! _6 r8 [, e2 g* C
</style>
. k; D: I( |' c3 h) q
</head>
& @" p1 \- s' Y. B" d
<body>
/ L0 n- l) Y: V' q7 B
<div id="pic">
$ V( O5 D0 G3 j" K; \/ N
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& _) D! z6 `) |3 [% Y% _
</div>
. h8 L: H$ }2 q
</body>
( E! [. A2 M) S( T9 d0 d
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
