标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 P; R! h3 F5 f. }
关键在于：max-width:780px;以及下面那行。
7 Q7 N& Z) S9 o) |2 G
固定像素适应:
3 E0 B) q! C3 S8 t5 g; j
* Y$ l3 d! J. l7 L4 ^
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> 以下是引用片段：
_: z- W( e) i, J* G0 h) v
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
5 U, w( f! G$ K$ o& f8 _+ \$ C% z
<html xmlns="http://www.w3.org/1999/xhtml";>
" V6 l, I* u$ _$ l& B& _
<head>
- d1 q0 U5 C2 h: R) i! S
<meta http-equiv="Content-Type" c />
! b* K' _8 X$ M
<title>css2.0 VS ie</title>
% q" w: ?; x& U7 \
<style type="text/css">
Y. Y" a, Y3 C7 C# |
<!--
' O' b* H5 P' j! B
body {
, R2 T& [; Y9 G: K" \) A
font-size: 12px;
* E; X* D4 P* N. A: G0 K) f
text-align: center;
) T" g. a" T$ u1 z. M) X
margin: 0px;
8 ]& g* v+ W' A6 _
padding: 0px;
* D" v: w, s' _$ K7 @" H
}
5 c! o5 }2 ~# X0 ]
#pic{
6 U3 _% {0 Z" ]% M0 }6 Z
margin:0 auto;
9 T5 V* U$ Z6 _7 z
width:800px;
& b$ ~2 [* F( C! P) a; T' h4 } I
padding:0;
. e" Z1 \0 | V
border:1px solid #333;
3 O# [: g, T: l+ Q/ C
}
( y- \, [) H' v8 v
#pic img{
% }% u, d# q% O/ H1 K; }4 A
max-width:780px;
6 C7 z( Q' W4 _0 \" n5 F' D! M% T N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' C$ Z6 {3 ]% j' N! I- ~1 } S
border:1px dashed #000;
: C* ~4 t; c( U/ `* A
}
3 s: n/ {+ v0 _
-->
1 N) l7 n* i0 i- C
</style>
) r6 X4 G" S# s
</head>
% K/ J/ L2 N- y5 V" P2 I, f
<body>
9 t K" f* n U3 T# s5 y% O6 R$ l
<div id="pic">
' A& }" X$ E2 c3 K) Z) z# e
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: o$ I5 Y% ]0 a; B9 O9 l0 c
</div>
6 {1 o# @ Z9 H G9 q- ]0 w: T
</body>
" D& Q3 D0 `/ t3 Q
</html>
: V& e/ i* b( l8 Q! i3 z: V, _ w/ P
2 x$ _6 }3 n2 _/ D
百分比适应:
: q5 T C. \. u! n) E
以下是引用片段：
/ d) Y8 v9 t3 ]0 b$ x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- J3 y& M& e. `/ b' r% A) h9 B
<html xmlns="http://www.w3.org/1999/xhtml";>
/ \ L3 x% v% K8 Q$ g7 s
<head>
2 y* K9 V) s. q6 {
<meta http-equiv="Content-Type" c />
9 G" H: j0 }3 ?3 x- C3 k* ~9 V
<title>css2.0 VS ie</title>
g9 R. T9 L* I+ h
<style type="text/css">
7 t: }$ J4 K4 s u7 E2 m
<!--
8 A5 R. ]$ I' I6 O+ S
body {
: p) P' ]1 `, Z) d! ~7 q: N
font-size: 12px;
& A* f8 p, q5 Y
text-align: center;
2 Z$ W( G& L& Z
margin: 0px;
1 ]# |( V6 m- r7 u
padding: 0px;
8 X4 B+ N& s' x9 k8 q% s
}
6 c; l- a. @0 `: @ B' v
#pic{
, v9 F" x) q% R7 b
margin:0 auto;
[6 R- R' f5 i0 W. W5 a& b
width:800px;
' S' ]+ L5 J" P' |! n# N1 z8 q' ]# C
padding:0;
+ N! Z K) k! K; s; W
border:1px solid #333;
* w& } B% S7 ]
}
1 v n! K5 u" B+ k
#pic img{
5 M+ ~0 _0 e. {1 |( w2 l
max-width:780px;
, o& s' Q& {$ Z; w) u! s
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- c7 j0 O" u$ A+ R
border:1px dashed #000;
3 ]5 L3 C2 r% r t! V; W
}
( L' c' K" S2 C( N1 @9 m
-->
2 p0 H7 ]! w8 @ L# P7 |$ h$ r
</style>
, G3 e+ F; ^8 H: L; _" N
</head>
7 O; @- T& S4 q( o! V9 m1 X; N R
<body>
& ?! V& u C2 P' I- j7 m
<div id="pic">
, e$ [& w! O7 |5 \7 ]5 [: Y% P9 D
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" U8 }: s( i5 n
</div>
# f% I+ z6 d$ ]0 z/ T# Q
</body>
6 j. ?4 s, { ^
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
