标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ b7 u: }$ `, n* }: z' [( O0 x. Z
关键在于：max-width:780px;以及下面那行。
, |/ |5 J& @1 A+ |
固定像素适应:
) n* c, V8 m2 D) n& t
) R& ?6 D( }8 p+ O n
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> 以下是引用片段：
1 [" [- L, w/ Z! R7 D: T9 V. k" B
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ e0 L4 j- q* X2 i* F
<html xmlns="http://www.w3.org/1999/xhtml";>
4 ] y, t0 v3 R9 r$ b
<head>
% H4 G) K. W0 J! O) m8 T- l. h
<meta http-equiv="Content-Type" c />
& K/ i% A/ G9 _+ k9 B# S/ r
<title>css2.0 VS ie</title>
( } X5 ^- K& V; Q" Z0 q7 ?
<style type="text/css">
' o4 }, o8 g9 f/ A# ~1 v
<!--
! J- N r1 Y3 C1 Y
body {
' F; Q9 Q! c+ M2 Z
font-size: 12px;
. s; y- k5 v6 r" ^# X" U) B" \# p, u
text-align: center;
- h/ y4 l( @: V5 i& B/ M/ W/ S
margin: 0px;
) E9 m8 w1 w% I. @
padding: 0px;
/ z! ]1 p" S ~ i$ }
}
' Y% Z6 D5 t; V) l
#pic{
# V1 T% _- g# A
margin:0 auto;
: ]1 U) Z* m1 N& O N& X* u3 M
width:800px;
% K# g& f# B0 @9 Z
padding:0;
# K' M* b9 \9 J
border:1px solid #333;
( z9 L; B% W- _ h4 E
}
( @ r$ F: M& ?+ J
#pic img{
2 n6 j% y( c7 `& q5 |
max-width:780px;
h0 k7 p; b* n; v
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! y C+ S% E; l7 k* }& o% H4 U
border:1px dashed #000;
* V* S% ~1 {" |% U4 e, x E
}
! |# }$ G; \. f( Q- l7 u
-->
* y8 U0 n) G# W9 o, Z2 L* \# m' F
</style>
9 y6 [* k4 i& p& d+ b; g9 d7 @& p( u
</head>
" Q, V M- k) o9 S
<body>
/ M8 F/ [3 `9 R
<div id="pic">
6 C1 @, w- c4 [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 j/ _5 W, I' s8 g7 R0 U5 [, q
</div>
7 M1 A: |6 t9 r5 r+ `. D; P& M& @
</body>
# j+ t9 L9 N( o1 P
</html>
* b+ Q8 |) Q! t
; U. P$ x. d: q, g3 H$ x
百分比适应:
4 W* @ j& l* [/ C/ u
以下是引用片段：
! W+ U& n# t0 P# @, n: e! i# G1 m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
* ~" U9 ~6 I5 P% \
<html xmlns="http://www.w3.org/1999/xhtml";>
5 q- x( s- s8 B! Q9 _6 e" v0 B
<head>
$ f. T3 O( Z5 b1 R7 H
<meta http-equiv="Content-Type" c />
Z; I0 z" _7 n2 \' ` @
<title>css2.0 VS ie</title>
( I. k$ K: b. o/ ~
<style type="text/css">
. h5 l4 s* C5 ^: G! [
<!--
5 ?4 \/ \9 U a4 w( K) m
body {
4 n# N/ J% d/ f4 |
font-size: 12px;
+ d$ H$ L7 H: X' F4 ]
text-align: center;
! w, B3 Q, h( F: h
margin: 0px;
) O, f* ?. Z2 a
padding: 0px;
/ H) {3 L+ O9 C+ ^: u0 n+ Q
}
" p X& s' z8 p3 x
#pic{
( |6 b J$ m) G/ g
margin:0 auto;
: M2 V. C* `. ]" |4 f' D: t$ Z
width:800px;
' i) y; y6 `- J& w9 v5 Q2 o* T
padding:0;
% C6 }: Q2 |. ~4 x8 h
border:1px solid #333;
9 \5 F! ~* L8 K2 b& u. s- X
}
9 C; u9 T4 l- s
#pic img{
" O) D3 E5 v* `$ W" j: N
max-width:780px;
* X9 O" Z5 C1 B' q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ ~2 H( S$ {. U
border:1px dashed #000;
, e$ r: n: l) T: w
}
; Z7 r) G$ Z# C/ `# l0 g
-->
9 ?/ f) b9 @; P, }/ L; [
</style>
: i& J7 M; x4 g* A" X8 s7 E; X& R
</head>
% T4 S$ g; _; T
<body>
% P1 _9 ^7 ]1 \9 [/ B. [
<div id="pic">
1 i6 ]4 u$ f2 Q: v' q9 s, ~, [9 s2 \
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 g5 D9 Z' m R2 T* O5 W
</div>
, n7 P! d1 N/ i3 O
</body>
1 p7 T' H6 s$ Q T& i- X
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
