标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
( ?6 q: l8 p, E5 ]) B0 d- N
关键在于：max-width:780px;以及下面那行。
, g. t+ y5 n) l3 w
固定像素适应:
N) ^6 D# U9 X- y- \
3 Y' v- V4 o# z1 G( S6 q4 W# {% Z
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> 以下是引用片段：
2 K0 [- p7 O0 H% X v0 K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 L5 G' w- l6 y
<html xmlns="http://www.w3.org/1999/xhtml";>
, N# F6 F* S6 c: A6 O
<head>
8 }" }0 }, l5 }$ Y! j- V; \
<meta http-equiv="Content-Type" c />
3 e6 H/ U$ Y# T \9 [' v
<title>css2.0 VS ie</title>
) I0 h* }' r9 z: F6 v
<style type="text/css">
2 j% _1 Q2 }( c/ n9 K
<!--
% C! T& J/ }$ A; B# S; k$ A# ?
body {
& ?$ E" M- X5 m- D( W6 O! L/ U6 k
font-size: 12px;
8 _/ Z$ e# W& m! |% m- b
text-align: center;
( T1 @- `8 W; n) F3 M7 P+ W+ w. e7 I r
margin: 0px;
( h2 u$ C* g4 {6 C
padding: 0px;
) M6 w- N o7 c2 {8 g4 |
}
. K# i3 p8 Q! _" ?
#pic{
4 C# p) H- M& v0 ?, j
margin:0 auto;
; }: t' x. n; X$ A6 C: W O" \
width:800px;
F4 W8 I6 S& l" \4 j2 M, g! l
padding:0;
2 E0 u4 }8 n6 t2 }1 o6 m( o) {% w
border:1px solid #333;
$ G: _& g0 H& e4 |# J
}
) Q3 T! H( A3 ?6 f/ B
#pic img{
, @' Q" Y4 Q9 i5 `( l# k e
max-width:780px;
' [! ]9 [) V. a) k! T# ]6 ^3 w
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 B' G: w' i' Z* d; W2 c- M3 e
border:1px dashed #000;
- M2 \- p0 l" x4 D6 O* p, ^- x% G
}
* O2 _% w s4 o1 Q3 U3 {
-->
) a! {) Q2 h) _
</style>
0 l& x. [5 L1 V: z
</head>
3 @, a, s5 ~) \6 z# _; X$ R- e! L
<body>
( i6 S9 c C! x( W, E7 {8 I8 k% `$ i
<div id="pic">
& q+ e3 _: M* [3 y, J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 \) y# U" d2 x- R3 x
</div>
. [9 B, h1 ]- |3 W4 @
</body>
C0 R+ r9 ~0 x1 N8 w0 d, l
</html>
. `8 O' N3 w8 e# F: t( }4 j! t
9 c& R5 D' ?* d4 T# G
百分比适应:
# s8 Y4 U8 W' ^) j: y+ F
以下是引用片段：
! y* n0 O0 U7 T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: Q& Z5 w( B8 \# d( ]
<html xmlns="http://www.w3.org/1999/xhtml";>
4 w0 B, R3 S1 u& E7 ]. u
<head>
( Z3 q" \1 c/ H& o6 O3 N
<meta http-equiv="Content-Type" c />
3 T' B8 u, H+ k% b V
<title>css2.0 VS ie</title>
) @) F! s" A& b. ^3 s
<style type="text/css">
- D5 k7 O4 _0 j7 i* d
<!--
, D' X7 s0 U6 _- W- R# n
body {
" E3 ^& }8 A9 h; e. j& ~$ Q
font-size: 12px;
( s, J! H( s/ [0 f1 b
text-align: center;
% y7 k& Y! d1 f, g8 v; C
margin: 0px;
0 I4 [( E" P7 u; \ S- g6 j4 U* U$ m0 a
padding: 0px;
" g/ ^9 y" @4 [' C
}
$ ~9 q1 {4 V8 I, Y
#pic{
+ k! R$ }3 }# D$ L
margin:0 auto;
7 N1 H9 j% o) H$ l6 E5 F
width:800px;
% G+ M0 f4 S7 H3 }6 Z. R
padding:0;
: M5 `5 `7 v' t2 W) x2 b; N
border:1px solid #333;
8 H( ^/ D- }( v6 V2 V3 Y5 g7 T" U
}
5 N# k+ j$ G% E+ g0 x4 b2 k A9 J$ e. e
#pic img{
" \7 l( b' M' s4 N B6 ^! [
max-width:780px;
$ M0 S f. C# ^- k; q% }1 ~
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 W1 W) B; i. C C
border:1px dashed #000;
3 ]* t0 t# A' ?1 s6 Y
}
2 D) P) z3 k" e
-->
" z' C y# O3 f5 z* ?
</style>
2 m- w; ?8 z9 I; y: \" Y. i
</head>
9 {) C2 z! \. V# T/ d/ o
<body>
/ W! H' I- H4 F1 B
<div id="pic">
4 t* S% x, _" X, ^0 ]& U# s
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! X9 {8 O+ O- Y* m( a
</div>
' f4 j. l+ s* X4 e& q) b4 I
</body>
3 ]- K9 E3 L9 i9 {
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
