标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& S/ H& ?7 }. x' T4 L/ r
关键在于：max-width:780px;以及下面那行。
6 f/ {6 j o2 x, X' q' w# {2 l, D
固定像素适应:
1 Z! \% Q' a3 I* Z- {
0 }8 f) F* A0 ~
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> 以下是引用片段：
& N5 Z$ x0 m( t, C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% h9 j0 R: f+ E) z
<html xmlns="http://www.w3.org/1999/xhtml";>
2 V) D& q* _# H' X7 t0 }7 {
<head>
0 n% s5 V, ~; F. _2 a5 P
<meta http-equiv="Content-Type" c />
% K9 M9 B& e S& A* E; F
<title>css2.0 VS ie</title>
7 F/ o% d/ `$ V: m/ c/ v1 J) S2 T4 t
<style type="text/css">
9 H5 G6 W/ Y, H# R% K8 A' B
<!--
8 T7 l: S2 U* k$ M
body {
/ _" @3 D. [ C5 s6 n
font-size: 12px;
% }: h& T, |& w0 K5 W' J% P+ r+ h
text-align: center;
7 ?% s: d0 C" t/ t' {! g
margin: 0px;
' a* y3 R4 }8 a8 s- m
padding: 0px;
. i6 C; F4 @/ ]% \
}
8 U2 L$ R4 n4 H4 u K% B
#pic{
$ z. i8 Z `; R# R& Y
margin:0 auto;
3 r0 Z- v3 B4 u; p7 J& @$ E1 Y
width:800px;
8 V5 ^% N& ^& Q4 Y7 B
padding:0;
( e) T g0 d O( Y7 k8 r
border:1px solid #333;
* `+ q1 x% y* F& t
}
7 v/ z6 d7 y8 e# z0 x3 o* M( _2 n
#pic img{
& L% d, ]( ^/ X9 I: e5 Q/ u
max-width:780px;
% a% w: G6 \3 c6 b/ y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
; D) `: K+ K$ E C: {7 A
border:1px dashed #000;
3 T" P5 s5 p: B8 x- f, z; n
}
. v. S7 B/ v3 s9 _
-->
: O" f3 p2 p& ~( x
</style>
8 L* k. C) o8 c$ ]' n+ v& E# e
</head>
( Z8 \1 J$ n* R
<body>
~! g6 F* G- q6 y, P# S4 W9 ^
<div id="pic">
. _( f! w3 u% r8 ?" v
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
6 z' R4 g' c. h/ u# V* c
</div>
. Q( t9 H! @' K# d1 T
</body>
1 L- W; D1 v2 N) d1 e3 H
</html>
1 L9 X* u9 y; `2 t$ K
; |8 q: ^3 ~, K5 x
百分比适应:
) z- L0 q ?- [+ @, L8 ^( S" c
以下是引用片段：
7 Q6 h' O+ z0 u5 w. j) v# L& L2 w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( V8 Y8 ^/ m( k
<html xmlns="http://www.w3.org/1999/xhtml";>
7 v ~* z2 j/ s0 \( C4 }
<head>
4 B$ ]; k) z" b; u$ ^ t) o
<meta http-equiv="Content-Type" c />
0 v z* h l Q) ]0 v4 R) g- x
<title>css2.0 VS ie</title>
4 }5 X/ n% Q+ t+ ~
<style type="text/css">
. n6 m9 B& p3 E1 A0 o7 b
<!--
5 O# _" [4 Y) }3 j
body {
4 k$ C9 j; F7 Z) X, j" O
font-size: 12px;
6 q1 o% W: |) {. B
text-align: center;
! Z4 o+ l+ T+ }3 f p
margin: 0px;
2 `% E) q; C8 P* f0 h$ e
padding: 0px;
7 P) O# J$ X6 }$ A! s$ Z# a
}
! O3 h7 H) V) H$ ]1 |
#pic{
1 D" `( r8 {. H3 V
margin:0 auto;
+ E5 e5 w4 L$ n1 g* m' h, b
width:800px;
6 \# ]2 c4 Y3 f. N3 D& ]
padding:0;
5 l+ w7 E. E: c# x0 f4 q, m( L
border:1px solid #333;
: r4 ?' W9 o1 l# W8 [
}
0 V, u2 Y/ X7 s: |0 n: X7 N
#pic img{
! g' ^# [" I6 e @
max-width:780px;
: ]$ r: ?7 M8 q# e6 V3 u
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
A3 k9 F% O0 }: j8 y" [9 a
border:1px dashed #000;
* ^3 \ y* p7 K7 |2 V* Q. L% M7 ^
}
5 w0 R2 d; o: a/ m' \, A
-->
1 o$ w0 }0 Z; ^- _
</style>
; W0 X' K! |1 v
</head>
( v0 K* J4 \9 a- l3 W
<body>
: f% {+ U( p, s# E2 [
<div id="pic">
4 A. k( d) Q8 ^7 {7 W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 _- [" K. y( b) t- a, N' s, {; Z
</div>
; w6 J4 w% M4 i
</body>
6 J/ n" o+ g; _1 ?1 x
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
