标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ t- [# Q) E6 H0 H- e6 Y4 D
关键在于：max-width:780px;以及下面那行。
6 M3 ^! z5 V) f# S( f
固定像素适应:
0 e7 n) E3 h" S# g4 ?6 R
9 g9 o3 u/ w: p. Y
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> 以下是引用片段：
+ M- z7 q3 ~9 i8 e5 e. }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
! C1 j! T4 d" f/ O) O d1 x
<html xmlns="http://www.w3.org/1999/xhtml";>
' B" S, ?! N# l! A/ a
<head>
: [( M6 P2 e A0 [: g
<meta http-equiv="Content-Type" c />
# D4 }+ p9 S2 G! |/ p+ c5 R
<title>css2.0 VS ie</title>
$ l8 a9 `, T% P6 K8 Q/ J1 [
<style type="text/css">
# v _9 o9 c8 O q0 Q% L1 `
<!--
+ } \" Z* F& h7 C
body {
# ^# G8 y; O y$ g
font-size: 12px;
) x7 A3 B9 R: E% A
text-align: center;
8 f$ M, H2 ]* j# a. i0 T
margin: 0px;
: m# t1 P2 `# W6 K) i* d
padding: 0px;
6 \7 ^2 q+ p! g, M
}
( h' `/ m* P/ X; U
#pic{
e' ?6 N% O: j6 q/ \) T
margin:0 auto;
9 l i* M4 H4 e4 }, ^
width:800px;
& C# y* X" P) @& I3 \
padding:0;
: y# B9 t+ i3 S4 C
border:1px solid #333;
4 R! A9 J4 e0 i% g9 a; B+ m
}
) C. o$ y8 N3 Q! V& k1 @4 i: ?
#pic img{
2 j) r( F/ T/ v2 J W& {
max-width:780px;
0 _1 z* }$ i" e" C/ s G8 H
width:expression(document.body.clientWidth > 780? "780px": "auto" );
) j! A3 b4 m+ k) U' Y
border:1px dashed #000;
/ [3 A% T- H- P/ d( `4 S: v
}
+ ?. G( w" w7 X. {
-->
# G5 Y- C! b5 |* O+ ?; ^8 l
</style>
+ m) b! ]* Y; @4 I1 o4 W5 S. S
</head>
4 x+ i2 R$ x y& ]$ a! U( p
<body>
) M" q1 v/ I7 D( D
<div id="pic">
- G7 l7 Q9 V) o* B
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% ?. A- g# ]" a
</div>
' S; {+ D' E6 x9 a- M# V+ T0 N
</body>
( W; g) ?' y4 m
</html>
" d; b1 P) \; w# e% F: N1 t
' F E" g' S- H; }' G5 U
百分比适应:
- L" _8 c. Y- i( t
以下是引用片段：
9 p+ m0 l! B% b# w4 B9 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; a5 P) L1 i( G5 [* E2 e
<html xmlns="http://www.w3.org/1999/xhtml";>
$ j* T+ [; @, M* O* S: A
<head>
9 [5 D- w! N- ~2 K
<meta http-equiv="Content-Type" c />
$ k- \" o2 h0 X
<title>css2.0 VS ie</title>
3 y) A: b- v. s0 B7 f' U/ d0 s, L
<style type="text/css">
- P, a" Y- ^4 Q! I3 n c1 O: n) u
<!--
N, ^; v# Q' ?/ f* ?2 f9 p
body {
- f4 m3 \3 s7 s+ f5 n, s! @8 S
font-size: 12px;
. o6 i. s; T2 V+ l: U% E1 P& J
text-align: center;
5 d3 q! _& ]4 @1 m$ L9 B K
margin: 0px;
( A( z# o0 h' h$ Z
padding: 0px;
1 b" C3 y8 [2 b. p
}
. C1 S8 N9 c- k" H% h
#pic{
f- s, }) } c |1 t' i2 L
margin:0 auto;
) m: X6 R# P. ~. j; M9 ?- b* q
width:800px;
) S3 |, E F) R& q/ Y/ x
padding:0;
" H- I" d6 S- @' m7 F9 C
border:1px solid #333;
8 |. u) M& r9 C
}
. q" ]; O# _( ~6 \6 g- K
#pic img{
1 M( T5 B# |6 }. x6 M
max-width:780px;
8 A2 j6 s- L, Q* @
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- v* `1 t/ B G
border:1px dashed #000;
1 E& D: \" H6 S% y6 j, ?( I/ o. c& ]
}
+ H+ @* L+ A& \7 g7 \2 s- {
-->
) _8 o( u0 z9 i9 Q8 d, h
</style>
" r' N/ i7 e- ]3 o. S( I
</head>
$ m2 {4 Z- C* x' ?# `/ ^2 a& Q
<body>
8 @8 Z* }0 @- U! K
<div id="pic">
3 [) P1 ?8 F5 i9 u5 @0 `+ x/ ]
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 ~" i! J% c" E1 q3 V
</div>
& r& I: f6 d1 c; z& Q' `6 I
</body>
! C t4 r1 `* s K
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
