标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 M( M1 A- {3 v6 {/ D" Y* `7 r5 M& ?
关键在于：max-width:780px;以及下面那行。
5 `2 H7 ^$ P0 t' m$ C. T
固定像素适应:
8 N% P! F' }0 _
2 \. g) c9 f* H$ e
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> 以下是引用片段：
* O$ j6 ^! \0 \# B5 h' T) B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- S1 O- h J: E G8 a/ h/ \# Y! g
<html xmlns="http://www.w3.org/1999/xhtml";>
' M+ ], G1 T8 A) U) `
<head>
# \1 P1 G* \' i5 @# D# D
<meta http-equiv="Content-Type" c />
; x& \, S& E3 T5 Y# E# o" e
<title>css2.0 VS ie</title>
* x9 J/ _$ f$ W D$ g0 \
<style type="text/css">
- ]# T# h+ z' t, V" M: c1 L
<!--
- L1 K8 a/ o, L! C4 t8 n
body {
3 x P0 o6 C X5 |8 p
font-size: 12px;
& T7 v) e$ J. U I
text-align: center;
. o- K e j2 l
margin: 0px;
' Z# g# K+ R6 B5 ~& n \0 {) x
padding: 0px;
8 [! @4 J: D" w8 h
}
/ C4 A5 X8 r- U: Z6 `8 O" J
#pic{
( `! r8 p( o3 X6 [
margin:0 auto;
. X7 @' C' |% S. A+ q4 C
width:800px;
" {3 x& _' P0 k' R
padding:0;
) b/ c* ^9 |# p6 a
border:1px solid #333;
2 }+ M2 V0 W1 f& U9 e
}
7 ] C$ X0 Q' [4 w. ]
#pic img{
- N( e9 G# z7 O/ E/ Y& s8 A
max-width:780px;
; W" J' r. i0 a9 n# G1 ]" Q' s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" m) \% f O* b( _3 x
border:1px dashed #000;
' U: o1 @ y+ y3 Q. n& x6 H
}
( V, D4 |* K0 w4 Y% f S" d
-->
, Z! `3 K( N: s0 z9 E5 S) Y2 H8 P
</style>
6 D9 u! V x: p$ L2 Y4 D, ^
</head>
( |1 E: r! F7 R: X" x0 B
<body>
6 B% w% i* I5 V( m4 y2 m
<div id="pic">
0 e" E1 N" g, h1 S
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& I9 G7 l' Y( o% l. |+ Z& h9 {" H
</div>
( l- I# f+ y1 y
</body>
7 l0 B, h, D7 U" b+ K& b: A
</html>
* l; ~) u" J9 E$ u; K4 Z( c$ j: C/ A- ~
& f; u! F8 j& y; S$ f4 F# ^
百分比适应:
. y7 O* N2 ^: [; s4 E! |; e
以下是引用片段：
( m' [3 ~1 g4 ?6 `4 b" d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
0 |& C5 f5 z2 D& p
<html xmlns="http://www.w3.org/1999/xhtml";>
/ k9 U# x$ {0 c8 ?' ?
<head>
- W" M! F7 y) S. I; j
<meta http-equiv="Content-Type" c />
: j1 M$ p* F/ t8 d& L
<title>css2.0 VS ie</title>
/ {) p W: i* D( }! N0 O I* X
<style type="text/css">
) b7 i2 G1 X' v4 H) a* K/ z
<!--
3 W' @8 q1 w6 ]! g! ]9 m2 ]
body {
' h1 P5 \! L$ a0 `8 a
font-size: 12px;
9 C0 H; W; S6 p+ G
text-align: center;
1 p( ^7 B) H. k/ [+ t7 Y. Y
margin: 0px;
3 ?- `6 Q( \* L( f; Y
padding: 0px;
; `/ F. F0 d9 _9 ]0 r% I# ^" ?1 p
}
7 ?( Y* g9 o) t
#pic{
- M/ `- H8 y# U
margin:0 auto;
& V7 ^, ~( c3 j; o6 p. u6 U
width:800px;
, b ~, K! t* U/ @- Z6 d1 L6 w
padding:0;
( e9 q. t2 J5 c- T6 m, i
border:1px solid #333;
, r( E3 @ _9 s! K* }9 A
}
7 m3 X6 S Y& a" s% X
#pic img{
" F. I) e v& V8 V
max-width:780px;
/ F& R3 p% }0 \" v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 j" o9 l- D; R/ n- T3 T2 z
border:1px dashed #000;
# V |4 @+ L0 m b7 M/ y' [* R2 O# o6 Z
}
+ x' B- P4 B8 D0 X
-->
) s* l6 K3 [) l5 L, X# }; W0 Q0 }
</style>
! { I+ v& P8 O
</head>
$ T5 j" n/ c! |5 G ~% O
<body>
- I( N# W. P4 A9 A" Q
<div id="pic">
. ?1 y2 \/ m0 r* n% H- T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 o) u" A2 n* m* h l
</div>
- w! ^, z* v& P0 ?9 q) \# v1 z
</body>
+ v7 a! Q" Y2 R9 d/ B+ N" P, o5 K
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
