标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
0 }" s/ P& f% s* ~- G: d9 F
关键在于：max-width:780px;以及下面那行。
% \& r8 x2 V. k: M
固定像素适应:
k% x* n# x# u4 @$ O& q# O) V
# \1 \8 s" S: K* Q$ \4 ]! |
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> 以下是引用片段：
4 z9 {5 X+ `4 x) D, K \& v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 ]- Y, J/ ?6 Y- z. d' ]
<html xmlns="http://www.w3.org/1999/xhtml";>
& X+ S$ I. @) _7 K
<head>
* U- K8 o9 \' j! f& J0 n$ z
<meta http-equiv="Content-Type" c />
& r& k4 D2 e. d* {/ Q% w
<title>css2.0 VS ie</title>
# O/ ], F$ w+ B5 ~7 z# I. w' \
<style type="text/css">
) z5 e. d. r4 j2 M, C) p M0 c
<!--
. k* o4 a3 d; X+ Z3 p1 D
body {
+ r) x% a5 w' D i; ~2 T
font-size: 12px;
' H- b( ^" d* t4 i
text-align: center;
# e Y2 q$ w! y1 A
margin: 0px;
) Z8 f" e3 G7 F
padding: 0px;
# B2 j, Z, f6 @! ^4 r
}
$ T1 c2 i) d) \# N+ T
#pic{
) m M1 j$ `) W4 U( h2 ^3 }
margin:0 auto;
6 Y9 m" r: t! ^3 G. p# [: u7 M
width:800px;
8 N9 Z& T+ h7 ?6 L0 O9 ?, b
padding:0;
5 v( @% A t% u- n
border:1px solid #333;
2 u) ?' z' W' x: k7 \* G
}
8 r q" ^4 P2 i( x
#pic img{
* B2 g/ r8 e! H; `
max-width:780px;
1 M: @. t$ o. r6 W
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! v) o# o7 l# L" v
border:1px dashed #000;
. _4 I9 M! U6 a% I! o
}
+ Y/ I0 }, Q1 n- m
-->
& [ M! V1 j9 H2 }
</style>
% Z. b6 I: v& S0 o: C
</head>
9 f, R+ O7 J) [0 f3 C
<body>
. Y' O# }0 |8 ~$ F5 P9 w6 c
<div id="pic">
2 e0 j* @# ]2 z& d
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, r E( ^) j/ u# A" {
</div>
2 C* w8 e$ {9 G6 K" @
</body>
# y! n. ^6 y2 a2 F- S, k' q. M; ^, i
</html>
' C5 C) c: S5 ]! X
1 K3 D/ n4 m# ]% W% _0 [. n8 i
百分比适应:
: D( x' P- z) b' x) e' U1 e
以下是引用片段：
" ]7 x! ~0 z3 A; R$ X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 ~% ]; ?7 f- ~. n3 \4 A
<html xmlns="http://www.w3.org/1999/xhtml";>
1 w/ P9 B1 B5 c b/ {
<head>
$ c# o7 t# T- W( J
<meta http-equiv="Content-Type" c />
, m% U. O, a- C+ w) z
<title>css2.0 VS ie</title>
5 f/ H: d8 u: {: j# A0 l! y
<style type="text/css">
# X( V& _; C; e. a# c
<!--
: u8 n% v/ ^) _6 ]
body {
6 ~( Y4 A- k- w) A' w. U
font-size: 12px;
% b: {5 N8 }9 U6 y0 y2 M( U! C6 y
text-align: center;
6 O8 O$ n$ ?; `
margin: 0px;
* }) {6 P$ J1 j. i7 t/ N' Y7 R5 t
padding: 0px;
+ g9 s: J3 D! f: k4 [- E+ C, x
}
7 c: I1 W# ~( m3 m, M8 Q
#pic{
[- c% b: X6 ]+ w9 y/ W- k5 d
margin:0 auto;
& a/ X% c9 X2 ] {1 H
width:800px;
- U! U' a& t- V+ L( z: G" Y6 K/ ^
padding:0;
2 U) M: T& \0 L( c. b/ p
border:1px solid #333;
/ L' Y7 D: f4 t# v6 g
}
' P; k1 _9 e: W, o9 T! s
#pic img{
) C# B m# b G4 {' l
max-width:780px;
1 _8 {5 S) `. ?' ?; M
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 y) H' k4 l1 L8 j! l- B% O) l
border:1px dashed #000;
- @3 V# U; J( E! Z
}
, m3 _4 u. Q( G Q m& t& K$ }8 L
-->
3 E/ P- G. S% [/ y, e2 d
</style>
9 [; z$ u3 ]) y g7 ]8 p! [
</head>
n5 H; w- O# ?, y
<body>
6 R& \+ p4 G! h9 \% t
<div id="pic">
# g" |" b v) f& L0 w$ f3 F
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
* }& C, D5 `% n! N2 J/ C+ M
</div>
# z, C4 C, a4 v6 Y+ u6 @% X6 g
</body>
" G9 f3 F, R O5 f! w" p* t3 K8 N% L
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
