标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
C8 E8 t- G0 [& _' a& B
关键在于：max-width:780px;以及下面那行。
/ n/ d# P% ~7 \
固定像素适应:
! d1 G- C* @2 a7 B) m2 ^- K( h1 t4 \$ O
# e- w$ B# K5 _1 S
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> 以下是引用片段：
5 B& R( ~" W ]: E" n; _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 \+ y2 j* x( L/ |. N+ |# v, q, c
<html xmlns="http://www.w3.org/1999/xhtml";>
& Q0 }. l5 s8 S* J5 D( c9 {8 `! Q/ F5 s
<head>
+ A0 s7 Y) F, y$ h5 I4 v" ^
<meta http-equiv="Content-Type" c />
7 r; m7 F4 h6 Q. \
<title>css2.0 VS ie</title>
. z5 m3 x3 X- ?( g- X- c i
<style type="text/css">
) b% i. m' v6 J# k# W" _: p9 o5 M4 H
<!--
$ _/ o o4 R* B9 i; R
body {
; Y5 F# W2 G3 J4 x9 a
font-size: 12px;
, e+ g9 e- Z( p3 S4 m- h
text-align: center;
+ @* e9 E2 [8 y9 ~+ @+ Y1 }
margin: 0px;
9 p7 r, R: n! I* `1 U- }
padding: 0px;
- x! S- k/ O% B% R. q8 s$ n. O# |
}
; x3 x: o% G% Y5 r
#pic{
! H, f: C9 c7 C* C4 V' U& ?; s
margin:0 auto;
9 p: N( ?$ A8 i
width:800px;
. w- P& w! w4 `" k/ O! t
padding:0;
, o* {* S2 [5 L4 L. u
border:1px solid #333;
& w/ f: l/ P+ V7 [/ a' _
}
9 J0 C J. V7 P, a, n8 v
#pic img{
3 z* K- p; N+ N' Q B' g/ r* s
max-width:780px;
! n% B: c( L4 H7 M$ E& O
width:expression(document.body.clientWidth > 780? "780px": "auto" );
2 O$ ]$ T, N( g7 W5 Z
border:1px dashed #000;
( u1 u J" N8 A( Z
}
2 E0 Z+ c1 H; I8 O+ F
-->
. a" x7 _/ j# F: E
</style>
W* W! I/ y2 l8 @& C
</head>
; f$ X: u4 f t
<body>
4 V4 j- C8 s0 W- |& V0 g6 Y
<div id="pic">
8 t7 r; u+ K6 V$ o+ u( Y2 e5 ?4 b
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 T& K: h; W/ ^: ?- p" g
</div>
; B* O; f1 h5 v$ t9 ]) q. ^
</body>
, t' c: L* _- N a: J8 A
</html>
1 N m+ J7 w0 x7 p5 m) A9 J. [
2 G8 S* u/ c5 A3 _/ J
百分比适应:
3 O) i2 K. b$ @. o' O% R& l
以下是引用片段：
" g9 E( o, ~2 f% U9 R8 `" b9 C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 N7 {) ~- Q! i! N3 v9 I
<html xmlns="http://www.w3.org/1999/xhtml";>
( d/ p4 U. f5 |# `3 b+ v# a
<head>
% j% @) k" U) z; \( J
<meta http-equiv="Content-Type" c />
o4 t% w+ p- Y6 [3 K
<title>css2.0 VS ie</title>
8 x1 q& a/ ~% `5 Q; u' n" m
<style type="text/css">
" B' V9 j! l/ R2 O/ v
<!--
/ X& X$ x$ z: N3 e% ?+ I% }/ H
body {
) Q$ o0 K8 v8 D0 w
font-size: 12px;
1 l; H# {3 ?7 c- \' Z; U, }
text-align: center;
% J% E& n. ?+ R# O2 v
margin: 0px;
1 n- w; X$ p5 _1 q" p
padding: 0px;
9 d' C% g ^+ j/ ~
}
* w: H+ u. n {* I) W" S
#pic{
' x. T8 Q8 c- A' W) G7 J
margin:0 auto;
5 U. v& S. U9 ]" D( E1 R/ Z( k
width:800px;
3 W; |8 M( \7 W. C' g
padding:0;
' w6 \$ T" A$ Y/ ]
border:1px solid #333;
9 ~- j6 N& k+ r& M" U
}
+ w- J( d8 [6 g" X9 f; t- c( c
#pic img{
9 W- R1 A; G- r; v# F
max-width:780px;
E, |& x8 C, C+ R3 p! ~8 ]
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
0 k! p. Q4 s0 {
border:1px dashed #000;
. v2 G3 u$ d" V" j# g
}
0 \: ?. Z ^- D/ B2 }
-->
8 |0 ~, L8 A3 a; c5 V) u( s1 e
</style>
( I* m; J; m5 n' f+ Y, [: Y# k7 M
</head>
6 k& m2 u4 J2 Z; T0 n
<body>
: g2 S d7 X# T8 E5 m9 F1 j5 Y' J
<div id="pic">
% L) K, Y9 U: C) Z# Z: N0 I
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 a; |. o! o) W! v; l2 A
</div>
: A! }+ K- _- A* J
</body>
) C i$ r6 }9 v4 t
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
