标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* E& x$ }+ M' X
关键在于：max-width:780px;以及下面那行。
4 `4 x) X! r- h# `
固定像素适应:
; U8 t% p3 ^+ _( m$ K
! M3 F7 Y5 ~! ~0 x4 F. a8 |
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> 以下是引用片段：
" K5 Z9 g" X. \+ p$ b" i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 X/ y2 j: J1 W' {. q1 w
<html xmlns="http://www.w3.org/1999/xhtml";>
* I' D' L6 j4 g' E2 |; _
<head>
$ p% O6 D+ b) d2 x. w
<meta http-equiv="Content-Type" c />
$ \7 Y" D2 t% B) X1 I. L
<title>css2.0 VS ie</title>
# q l% o. w9 H7 u
<style type="text/css">
: R& w4 I6 G y2 z% y k) B
<!--
6 N# N: b9 g+ T( y) t
body {
3 y& Q1 }& \- C" {" \5 |* v
font-size: 12px;
" `: Q6 \. n! J3 K7 z
text-align: center;
1 b; g" r/ O) h2 R0 Z2 `
margin: 0px;
- B# e) p" i+ F/ h% O5 B" w+ K$ Q
padding: 0px;
! M( A/ U# m \: w* h3 c/ t) U8 I) J
}
% F1 M! i2 x9 Y1 `
#pic{
! T4 J# u6 t( K
margin:0 auto;
' z' t/ k- s, I9 O0 T
width:800px;
. A }5 j' v S* b
padding:0;
9 x$ d2 M0 E6 U6 Z2 O0 y
border:1px solid #333;
# Z Z4 D. n h" ]& x# O
}
0 |0 B5 ~5 o9 y9 o! Q0 n# r
#pic img{
+ p3 A& \, k ]& m( A& j# ?$ D
max-width:780px;
5 v. L& \; g8 A2 @$ F: h# }
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- A! K7 v( U& ]: i8 l
border:1px dashed #000;
+ j' v) u% o5 \ F
}
$ \2 C! y" n! m& }* ~" O# x8 I
-->
$ a8 O" i8 j& [1 B. F7 J( Z
</style>
2 j7 k" w5 S/ h. {. G7 q
</head>
' g& ?" p7 {" k( X l
<body>
6 x# L0 ?$ t+ u/ K6 d& Y
<div id="pic">
9 L3 q* x7 p7 d2 U7 S, ]9 n
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 F' w; j, z* G* d/ P2 v9 L% A' _6 x
</div>
9 _* A2 z$ _# W4 r9 g7 d1 A4 |2 ?1 a
</body>
, F) a5 B. T" w e* W
</html>
9 Z6 I! y0 F; |/ T
9 l* x# c+ w# {5 e0 O; I
百分比适应:
4 \5 w) f/ n6 g
以下是引用片段：
" K% I, K" l: D# w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 k! N4 D9 t& s) L% Q# ^
<html xmlns="http://www.w3.org/1999/xhtml";>
3 j; T: y5 n; d2 V' H# f }
<head>
! ?, U' O) b8 }. V0 `: @/ m
<meta http-equiv="Content-Type" c />
9 G0 Q; O) u% l3 ~( j6 _ g# u" v$ j
<title>css2.0 VS ie</title>
0 U; {2 e# j* Z1 K, @
<style type="text/css">
( r& P# ?8 E5 @% o H& |) y3 `$ q
<!--
, S0 x4 ^8 b7 A+ b7 ~
body {
, w; e' B* |: r1 K' \7 I9 O$ {: G; t
font-size: 12px;
% I9 `8 m7 X) k7 A! p
text-align: center;
2 d k# }/ @! |4 O# T9 Y
margin: 0px;
) ]3 b& N7 q, l, v
padding: 0px;
: p/ x! ?& {! E' Y7 s$ C% p1 S, q
}
8 o* _7 t7 U% @
#pic{
0 Q6 B7 z: q8 j0 L# P. F
margin:0 auto;
1 D2 f" E4 D3 V; Q' f; d
width:800px;
1 A* \; t6 J+ B+ M
padding:0;
$ ]% D. N f# d' G j: W0 w
border:1px solid #333;
* L' Z; P% f' V9 j
}
5 m4 j4 g. K M" m9 L
#pic img{
" t7 }1 m, C; n2 E$ N2 k* e0 U8 y
max-width:780px;
& \; m+ n$ d; {4 d5 F% r) S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
. @6 U, c; X; b! T- B9 ^
border:1px dashed #000;
$ d1 O0 t, {) u% i, ^ \9 w- A9 e
}
& a9 t% x. [+ N: ]. j+ v1 n
-->
) t& F4 F! B) \
</style>
* b1 z2 H" B" T$ W
</head>
# r! c; B; A" y9 X4 k& H0 K
<body>
! v2 Y2 ^3 s3 x# a9 @2 ~
<div id="pic">
4 q) ]! r* ]; ]' N
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' H$ ?* q4 D, `( y
</div>
3 q* E: e: k6 Y0 v) ~
</body>
2 R1 f, C8 t- ^! |( P+ o ?
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
