标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ u1 S! w, B: ]1 Z5 y' Y) c5 j
关键在于：max-width:780px;以及下面那行。
, h, Z( \: Z3 [/ f: y! V$ s5 j
固定像素适应:
, M2 a. p/ R% h K
* ?- k& \' a, [, @
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> 以下是引用片段：
# L: ]% u C! [ }- \* U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* w r1 y5 T* n0 t% o5 S; l/ f
<html xmlns="http://www.w3.org/1999/xhtml";>
$ p# H7 w3 S, L& u: Z6 F
<head>
4 Z% k/ q' D4 |, N! m$ e
<meta http-equiv="Content-Type" c />
: [2 I0 {" V& Z" G
<title>css2.0 VS ie</title>
8 l3 Q) p& h1 d s% u
<style type="text/css">
! G) i9 ]2 S8 R% S
<!--
4 r! i8 b) a5 a& J1 P' |: ]5 o# E
body {
, s+ e% a& H, y; q& |- J( O
font-size: 12px;
( q' s4 T1 G+ r
text-align: center;
/ R" e9 h! |# q' [$ D
margin: 0px;
! d/ l8 y8 ^) [1 N1 { N# @
padding: 0px;
8 l: d6 g5 Y! V7 d* J9 ^
}
( \2 C. I% x5 J: V3 l, n: r/ D
#pic{
' L- r% |" }& y7 v# o
margin:0 auto;
: x* M: p0 ]$ Z) A
width:800px;
. _- }- m) L8 p
padding:0;
+ s8 J$ q5 D+ A3 Y
border:1px solid #333;
) c4 K* A" K' m* r, e" C: d
}
5 z k6 I) u k' Q6 L7 o. t
#pic img{
9 @' E) |3 E. z- |4 {$ U* C$ I e1 N
max-width:780px;
; W8 N" P4 I0 V
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! ?: [8 {% ]+ c& `/ g+ J
border:1px dashed #000;
]5 H2 T. ]% }0 [, [+ ~
}
' d# a- `) m0 ?+ P0 X/ Z1 Q! l+ S$ x
-->
' f9 Y. k5 K M3 } S
</style>
" j$ ~; O* n* K+ f
</head>
4 H0 J* I8 b9 b3 v/ K0 M+ x+ P
<body>
) c- [' H" Y9 J v9 G8 z2 I5 N
<div id="pic">
, X! M$ O# R/ q. t$ @ t8 x
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' B: [$ R" H9 Q( B$ H
</div>
8 d* w5 ^. d3 R( Z& n }
</body>
" U, z* M A4 D$ J( _$ Z! r
</html>
B* w O& y1 Y! C& `# Y* X0 z
) Z0 B5 l( i5 ~
百分比适应:
1 y! b# O2 a/ k. _1 O* s
以下是引用片段：
- ~. J4 U$ B! v: R9 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 l# B; Q" N7 O. w
<html xmlns="http://www.w3.org/1999/xhtml";>
! v3 a' C, u& O3 Q# R" J+ V
<head>
8 ]' i- z2 d6 P7 y- X3 o$ [* C
<meta http-equiv="Content-Type" c />
" O5 K* o" ` y7 }
<title>css2.0 VS ie</title>
* p1 U! z4 C* R% A' M% D s* ~" K+ z
<style type="text/css">
% {% `- @6 I2 w8 \( z; R
<!--
9 s4 @1 }$ F6 y2 m& f% u
body {
1 _) c- o, Y4 [9 X% M9 m) C# g% C
font-size: 12px;
8 v8 L" u- P( f' x- D8 J' Q
text-align: center;
7 \0 U$ a; N; L7 H, N2 T" h6 I
margin: 0px;
9 i A1 a# ]+ z2 ^8 \
padding: 0px;
- ?& `, i! }% L5 K9 n
}
/ m# j: \/ R6 j6 l9 G
#pic{
( E# x' y# B3 Z9 C! t$ {
margin:0 auto;
; W3 ]6 q5 i3 p1 s% q) g* b
width:800px;
$ r5 d! W+ |2 H
padding:0;
( m7 W J+ z+ Y2 h* p. g
border:1px solid #333;
% g: @- e9 J, J& M
}
6 Q1 c8 _$ c6 M' M) s1 ~& }2 B5 E/ i
#pic img{
* |: T2 a x0 v2 L% w2 m: K3 q
max-width:780px;
5 s5 R* o- e' I, l" ]3 ^4 p
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 }0 a+ h: ^1 }% Q
border:1px dashed #000;
# p# M! R7 V2 H, M
}
8 [. m' f U/ n& J; i
-->
! n% e7 J: }) J* p" V: V
</style>
( z) l% {, ^4 {2 ?) _
</head>
5 o$ A) I2 X6 q8 u9 _
<body>
- {/ Y, T4 i5 [+ Z, c7 X5 {: I9 C
<div id="pic">
+ P! ?$ F& U5 h6 l/ I! H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) {) J: F" e1 X5 ]" t' i
</div>
. T7 k# K1 g9 e3 O
</body>
' B5 N7 u# _' D0 V/ Q- v8 C
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
