标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 U4 A+ e8 `9 ?( {' z# E
关键在于：max-width:780px;以及下面那行。
7 n s% D2 Y7 x0 @! g+ S4 Z
固定像素适应:
: F. p5 P+ H- n& B+ D/ h6 W
( X* Y2 k; s: e J# G9 @6 q
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> 以下是引用片段：
6 W- i. x. |+ a: g' _) j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& Y* \" H7 ]/ L3 G: f. n
<html xmlns="http://www.w3.org/1999/xhtml";>
% m$ Q! t) ]/ G1 S
<head>
; U2 U$ n G+ Q8 F: Q+ z
<meta http-equiv="Content-Type" c />
: P" n. S3 [' E& u- q
<title>css2.0 VS ie</title>
0 k3 Z6 H3 b8 {& a5 C3 e
<style type="text/css">
$ k! @1 H- }9 @8 A0 r: K/ _6 ^
<!--
9 K. f1 G7 D- u
body {
; H9 k+ l1 @5 _2 }4 l4 Q
font-size: 12px;
# f h* w U( f. u) J- r
text-align: center;
3 g, I$ W7 b" q% `+ H' d
margin: 0px;
5 @: @& A1 J8 O. x& f/ Y
padding: 0px;
* Y% }: X' I2 r& y9 j
}
/ s" _5 [0 \9 J( c3 h f
#pic{
! ]8 e/ ?6 I$ G3 h. b f
margin:0 auto;
; G; {# K( j6 \9 @% z/ i
width:800px;
) [5 d) m8 K/ c$ v$ q \' f
padding:0;
~. } H$ M7 h6 }0 O' L9 J* P/ l
border:1px solid #333;
7 G$ O; |7 ]6 e: {& B2 }2 ?
}
2 M& |) H! @9 t" M0 S! z- i" J
#pic img{
$ w6 M; F$ X C, e7 E! `
max-width:780px;
3 U5 s. A' ]' s- I2 `# T: P
width:expression(document.body.clientWidth > 780? "780px": "auto" );
, w( A6 ^/ ^% e8 m$ B/ T
border:1px dashed #000;
0 g, a& z6 ^% L0 r
}
. g! R! ]) i0 A
-->
( [# V, X! }/ ]5 R# Q
</style>
, ^+ @" V( H( Y# G( J* f. E" n! Y
</head>
% V" [0 a$ Q3 O* y0 s
<body>
* |. c& b7 c' e8 ^# a
<div id="pic">
& Z0 J8 {' g; p/ L2 p$ a) |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ I2 |: c$ @, r2 e- `* t) N
</div>
+ A# B3 w( N9 Q0 D! U& N# m7 N
</body>
9 J/ }" Z3 i( C9 Z0 ^/ u
</html>
! I# ~6 V" S! M4 u
. b5 F1 I/ P; D2 R5 I% X
百分比适应:
M! K* S, L+ @
以下是引用片段：
5 J$ L. ^+ `" K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 ?% y9 i" @/ R& N+ R
<html xmlns="http://www.w3.org/1999/xhtml";>
4 s& Q6 H3 J* F3 p$ f1 y4 a
<head>
0 g6 D0 ^9 Q" n7 \
<meta http-equiv="Content-Type" c />
) E2 N+ v' U/ O$ S9 y
<title>css2.0 VS ie</title>
$ A; G- X8 m' P6 i) I$ k& o
<style type="text/css">
! R2 I2 `" J: K
<!--
1 g. O% g5 ^* G9 x! x
body {
6 X- \8 F) R& K7 P# @
font-size: 12px;
4 p1 [" X5 s: X: H0 V# R
text-align: center;
1 A/ \* w) Q2 I4 |* ~4 z
margin: 0px;
& l9 J, F% ~. P% w0 j3 H
padding: 0px;
9 L6 K6 F# K, ]9 |
}
1 x3 Q, v( w, n5 M
#pic{
% r! B' U- u1 u. t/ v) \% }( q0 Q
margin:0 auto;
/ P6 Q; D+ P5 ^7 M
width:800px;
. ~& U" g1 D. x
padding:0;
' @' q; ~3 Y+ b8 _$ S
border:1px solid #333;
& B! P4 g0 o: M1 q
}
8 ?2 E" n& \! E) C$ e1 d" Z
#pic img{
/ |. H3 R! ~. K$ G3 g2 k% [. e c
max-width:780px;
5 I6 R1 {; ^0 Y7 o" _2 ^4 x
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, O. `5 r* p2 i
border:1px dashed #000;
1 _3 P8 \2 J2 [& x: X# b
}
) N: ?4 c$ }; y% x
-->
- H: \1 \6 s# [+ j
</style>
* l8 a3 i8 W! L( e
</head>
# P1 D3 o3 \/ L T' ~+ T& k) H9 e. X
<body>
7 J4 \1 E- r& E0 k5 Q2 m7 P3 B
<div id="pic">
% C8 k! i/ i7 l! U3 F: Y+ j; A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- V3 O, R5 J2 f1 W8 b D
</div>
! l8 \) P6 m. {( v6 t
</body>
* S% s# N; O T- N( p, ?/ f8 ?# u
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
