标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 n7 E+ S4 a7 j( F. z, {. M
关键在于：max-width:780px;以及下面那行。
8 v; Y K9 a& l5 R
固定像素适应:
8 G' ?$ f2 v9 ~% ]. Z6 Q
' M" R1 o4 u' g
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> 以下是引用片段：
$ i6 R: ?, j, @! i# J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
e" {9 f2 d+ |+ M$ t0 P! ?
<html xmlns="http://www.w3.org/1999/xhtml";>
& `9 c4 k Y0 n& `# n# {
<head>
+ Q7 B* c! ~" @; r
<meta http-equiv="Content-Type" c />
, |3 ]6 N) F8 X/ q' j
<title>css2.0 VS ie</title>
: i6 C! _9 w: `5 s1 h# y4 ~3 ?6 Y
<style type="text/css">
) |6 t$ T# @( ~
<!--
L0 g$ F6 e. Q, Q; W
body {
( V' C: y8 _; {1 d& p
font-size: 12px;
4 Q z8 K6 W$ M+ g% ?) d8 n
text-align: center;
! B+ ]4 @1 M! h7 g/ y! x
margin: 0px;
7 J: L& B4 ^1 B
padding: 0px;
( k% _* U0 _$ }3 O
}
2 N9 i- P5 k& Y9 I
#pic{
0 O' E# r# H" T6 c' Z
margin:0 auto;
/ |; e8 M; Y. l# J1 y" V$ z, l& l% F% x
width:800px;
. t) h& ?) i$ J; G/ _3 o. W5 s0 [
padding:0;
5 y# W1 O- C& L9 B$ c" \5 Y
border:1px solid #333;
+ a& {5 t8 B5 T
}
/ I& s# v/ \0 D# |2 h
#pic img{
5 S" p9 D' y1 t
max-width:780px;
( H6 P' D- f& L; b) q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, u, {) q9 C/ P7 e
border:1px dashed #000;
7 a1 O% E+ T) _+ H/ }/ K2 h I ~
}
8 d* E' H/ H! N* M0 L
-->
! F; Q9 h4 d6 a) }+ q6 E) `
</style>
) g% F, d ~, s3 j
</head>
! N6 P7 f: h( d. T2 | S
<body>
1 d0 c7 z* Y. b, _, E
<div id="pic">
7 F0 Q+ G5 U* I5 r5 g# O H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, S1 w1 e: P1 ?( s# V
</div>
/ r; c3 g; ^6 {, T
</body>
& C# r1 R4 }3 P% E
</html>
* Z( D& K) ~) L A2 o% ]6 p8 ^
- O) B) ]& m, Y2 z# b
百分比适应:
1 T) C3 ^+ _5 Q, Z/ p" s$ [7 x
以下是引用片段：
) o" f# m1 `# ~# N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: D$ n4 f6 n, F. X) B1 |
<html xmlns="http://www.w3.org/1999/xhtml";>
4 l; K z" `) o5 h
<head>
- D! Y G! H% ?2 Z& Y/ P
<meta http-equiv="Content-Type" c />
4 n/ [$ v, l, e8 T
<title>css2.0 VS ie</title>
. K% Q1 P3 ^/ U/ x
<style type="text/css">
* P* Z; y6 J! H, K( x1 o# }
<!--
5 ]% \+ w$ U" t
body {
T( f6 K( L# H3 {% s, @6 N3 K
font-size: 12px;
% ^: h& F& p: D$ I' [! I0 r
text-align: center;
" h6 V0 F& Y0 d3 `/ h6 a$ @
margin: 0px;
- d& S6 h+ ]9 u2 X8 c$ `
padding: 0px;
% q% @, \# u, t
}
1 S# e; h7 T! f- L. |# |) ~- z9 a
#pic{
% ] I% \" L+ F! S1 a
margin:0 auto;
# s7 W, M0 c6 S) G. |; Y0 }" H: D
width:800px;
. ]) B$ Q2 O$ \& u
padding:0;
2 D. I, T- f6 A
border:1px solid #333;
& |! n/ K/ J4 E. Z$ T/ g! V
}
5 m: x2 N) K5 @+ Q. `
#pic img{
6 O6 H& }8 o4 q+ [. ^7 ^
max-width:780px;
1 q6 c+ s( x' \* [0 `+ {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 w0 E- s# D( A9 d7 K, A
border:1px dashed #000;
- u* a3 {* k0 v/ Z" [+ F# {) F- f* b
}
Y/ V) B( |$ J7 }* U5 H
-->
8 i' \0 }: R% E# M$ D2 {. W
</style>
% n0 g- |8 o4 H' g. U4 C0 B% |
</head>
! W* M2 V( o& N5 e3 z) f
<body>
6 m/ O; F" w \& {
<div id="pic">
8 P N, K5 I3 W. S. E' X
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 q2 n9 c/ y& d7 E9 d D
</div>
, x* T( h5 y6 c* `1 F
</body>
" i7 j& s) ]6 F" Z4 k
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
