标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
5 N' e0 l. e' s- o' T1 _+ z
关键在于：max-width:780px;以及下面那行。
2 i% E' |: i+ q# h# }2 F0 d9 a
固定像素适应:
. Y: I8 A( n! m* E
8 i% h( N% U& G, [) p- h7 z* |
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> 以下是引用片段：
. G( i# {& P- }$ J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, I2 x# C- A$ g& u* M8 N
<html xmlns="http://www.w3.org/1999/xhtml";>
1 F5 W _* V% M4 M
<head>
1 U' D/ p! u0 \. h9 h0 D
<meta http-equiv="Content-Type" c />
: r; ]0 ~! t. n' i
<title>css2.0 VS ie</title>
' Q$ Z) t. S5 _" Y
<style type="text/css">
$ r( } \3 `+ ?" i) D
<!--
% _0 N* c% ?7 E* d
body {
& y* u# G. r7 [# U/ Z6 _, N! V
font-size: 12px;
, ~5 ~, [$ i4 X3 o4 }8 I& b
text-align: center;
: M6 E3 V. ?/ q
margin: 0px;
; r8 k2 y4 s# F/ c& r# }7 `" T
padding: 0px;
Q9 b' A, Z' A; m
}
7 A# ~& ^3 F7 {1 E/ e/ d
#pic{
7 o3 P" j" J1 h; ?' ^. g! r
margin:0 auto;
5 }) e6 S) b& k( x8 r5 D& w
width:800px;
) j# x; q* n ?+ ~3 x1 h( U
padding:0;
5 L9 b% |7 n) F5 I: S
border:1px solid #333;
# h9 e! i! g" c5 T0 |
}
; m* `6 K! a+ w: B# f$ a! d# Q! M
#pic img{
5 V8 k3 s: @8 J. Z7 G3 D2 a: j
max-width:780px;
3 w: W" s4 c; L
width:expression(document.body.clientWidth > 780? "780px": "auto" );
8 o; N: p5 B* g, G, K. l& v3 d8 N
border:1px dashed #000;
' {7 f+ ]& L' z; H( V" ?8 X, \
}
. Z' O& U, n0 J% o2 D& c& o
-->
. u+ n4 J9 n7 e: u6 f0 Z
</style>
+ s+ u- d) L1 m9 E: ~; w T& |
</head>
, s4 P% j$ I8 U5 Y. z
<body>
& |2 r0 d! M5 S+ _ Z
<div id="pic">
6 o( E& l/ Q$ l: K) K6 D
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! a0 C6 @( R$ {. {) G
</div>
4 w+ A6 E. G8 M2 O5 N% {, E3 z
</body>
4 S; K* d4 s2 N
</html>
7 ~9 J' f( o4 @* i- a
' b& Q2 {8 y" v3 ?0 X% x* ~
百分比适应:
: h( }; x/ S& c
以下是引用片段：
7 r0 B' @" y# c1 q; @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% h: X5 W5 `% t2 L
<html xmlns="http://www.w3.org/1999/xhtml";>
7 U, E! p, Z+ g% p
<head>
, z: k* ]+ y3 v% N+ L3 m
<meta http-equiv="Content-Type" c />
! Y( E- W: [+ K3 G" |
<title>css2.0 VS ie</title>
6 J& {; M$ [$ J, C( d# s
<style type="text/css">
6 i* X3 J' j# k4 s1 t. X
<!--
, }2 B& g: b2 t% [
body {
2 Z; Q- E& y# m, O+ G& L7 h4 d2 l, h
font-size: 12px;
" M) ?6 ]" o& ]" Y1 j9 |7 \7 x: @7 H
text-align: center;
. O9 a# Z) T6 }# Z+ N
margin: 0px;
" ^: ~- V G* x: J- }$ H
padding: 0px;
. p! |8 h+ Z& z) s+ j
}
y. ?5 h7 x2 `$ q3 x6 \" ^
#pic{
9 ~' [+ M2 y2 }: y$ ^6 z& N: V# P
margin:0 auto;
+ s8 r* _( I c" [* A
width:800px;
" K. I$ `, m+ R2 y( U
padding:0;
( V7 s+ V* p, U! p- f" _
border:1px solid #333;
, } \ L: G- j
}
0 t' |% L9 K4 x# ~
#pic img{
$ S% `4 \( V8 h2 Q: W
max-width:780px;
8 S! i* N4 n7 t$ G9 c4 O: j
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
; i2 ^! r& N$ a1 x; ]
border:1px dashed #000;
* ~1 |6 l7 \+ v2 J& G' N
}
, k2 t9 ?! ]( Z: T
-->
/ r0 M5 ?4 x/ X
</style>
5 [6 T4 U% U2 N+ Y& [; Z% M/ _+ b3 h
</head>
5 y, e7 ] q$ G4 K% x) q$ R
<body>
2 |; X. q- x1 ^. k5 N6 N4 p8 x
<div id="pic">
, V* {1 k3 v0 |" S; b
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 T0 J7 A) u1 M8 c% N& z3 q6 z
</div>
8 l0 k: }" ^6 J: q! s8 I
</body>
2 t \7 L% M0 ?# d: B2 z! w! o9 x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
