标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
8 h* ?4 u8 Q9 D
关键在于：max-width:780px;以及下面那行。
. V3 {" c2 d- O" u/ `
固定像素适应:
9 @' h) \% [. b9 [: B/ C b4 Y
6 Y6 \2 D2 z8 [# T/ E+ z0 x! ]5 P
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> 以下是引用片段：
& g6 p" o& o! x) W% S T! k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- b2 Q- I* J' O1 z: e
<html xmlns="http://www.w3.org/1999/xhtml";>
" N8 z6 s5 B+ O. O& v+ J
<head>
1 z( e9 ^" V' H" f. y& V
<meta http-equiv="Content-Type" c />
* c* r8 I* }$ F! ~# ~' w. @3 [1 `
<title>css2.0 VS ie</title>
8 K% X" r: E4 d$ n* k0 l
<style type="text/css">
) N4 i; Z) Z% O0 s9 l ~( b
<!--
8 J/ F% Q/ g: K/ }" @& @
body {
2 f- k& ]* l# L! R9 |* b" [6 g
font-size: 12px;
' ~$ }2 |, t* K( \0 V
text-align: center;
. H N/ o0 n0 F; P: l8 ?
margin: 0px;
6 Z/ X; ]8 W6 d+ _9 s
padding: 0px;
1 ^8 y' ^7 Y4 x) l6 h
}
# r( W# M7 {: r1 `% q
#pic{
( X9 d# O+ }* s4 P8 T1 Q
margin:0 auto;
; \4 B+ {: l3 z/ a
width:800px;
# w4 r. Y2 F# w& F5 ?3 U
padding:0;
4 E0 ~. @0 s* a' f1 x
border:1px solid #333;
* g. z, a: y, s
}
: G* i* l9 W2 R( j4 f1 @
#pic img{
, G4 d5 S7 N1 Q# [- x* j
max-width:780px;
! h( m2 x8 T+ H! M b) ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 v' K% F5 J( Y
border:1px dashed #000;
9 M2 N8 {! `/ t' a8 ^5 E
}
; Z& ?6 p- u3 _, K A% r
-->
& R1 u$ X, _$ a3 R6 B6 Z2 F
</style>
' H' \1 B. F- V/ g' p
</head>
! a. p- q1 p0 R# Y0 ^* F. ^
<body>
7 ~' W6 c+ G, t2 p6 q
<div id="pic">
$ @+ n5 r ]2 B% i9 Q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
. U/ ~' v& x8 t4 s
</div>
4 [% y9 B6 A3 i3 @* N! f2 L
</body>
" P$ R E; C* y/ j. y7 T
</html>
! q9 Y: D+ N7 J' o o
$ A! ^! _1 X( M
百分比适应:
. I. u8 R, Q) q. S% a/ y/ r
以下是引用片段：
, k: [( d1 Z. Y. f! V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
k4 p' g& f) w& N7 }
<html xmlns="http://www.w3.org/1999/xhtml";>
1 b; g9 h8 @8 L6 j, h
<head>
: H; s6 y( z! F; S6 s( R
<meta http-equiv="Content-Type" c />
) A9 J) c0 N8 C9 b
<title>css2.0 VS ie</title>
( A; \; Z0 L' c. T$ C
<style type="text/css">
! ^2 k# Q* U+ S/ E2 F! I4 y
<!--
0 i& h' p$ s" u& H
body {
4 @5 k% b( E+ F4 a- Q8 }' u
font-size: 12px;
6 a1 N/ ]8 U/ d( I" ?0 m
text-align: center;
; h* }& S' E8 X5 Z- x
margin: 0px;
# R9 g+ W, A$ i( P! J
padding: 0px;
8 O2 p- B) z( ~
}
% H6 }( G' u$ H8 W: P
#pic{
) r6 ]/ F0 O4 M
margin:0 auto;
# y. v! v g9 s5 v. [( [$ Y
width:800px;
' Z% d C: e2 s
padding:0;
/ i+ d- X% g2 X. Z6 k8 O: l, `3 @" G$ k
border:1px solid #333;
" @) K0 `$ P1 Y# v" T
}
4 Y+ I9 X: ~( _
#pic img{
5 Z4 {0 r: x' Y5 S" D
max-width:780px;
; u N1 F( T! `, C$ a% G+ m' H, K
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 L% t1 d: i7 z1 R; o1 u
border:1px dashed #000;
% t1 v* j5 `. U5 Y* Y/ w4 I4 D/ U
}
2 d0 b. w$ q, q- R0 R
-->
0 }0 K3 F% B# q+ @
</style>
) i. ]8 a/ y/ Y% }& s; x3 f% f
</head>
" G2 V3 R, ^# d! A: R4 G/ u& `$ ~
<body>
* a7 V: n( m: O; I2 Y
<div id="pic">
+ \9 B. ?1 {+ x4 ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 o% X5 G7 \+ L( z; ^
</div>
' s. X. }- l8 `. c% y
</body>
& }' h+ v! @1 E0 e
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
