标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: I1 v5 _ Q4 J' X3 A' p" @
关键在于：max-width:780px;以及下面那行。
/ u. H; N! e) P% j7 W6 L
固定像素适应:
: x5 @0 H7 _$ q1 k
A% m9 r6 n: J, o1 x$ k( e) e
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> 以下是引用片段：
+ T9 D' H: S8 h I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( L0 Z5 p$ @7 J! [' r
<html xmlns="http://www.w3.org/1999/xhtml";>
% j. f; ]% }( Y% q
<head>
# p$ ?0 M$ M0 j h& A. |
<meta http-equiv="Content-Type" c />
0 J6 i7 O' O$ Z: G
<title>css2.0 VS ie</title>
! A, }7 Q* D8 y) @8 U9 n
<style type="text/css">
3 x! \+ c9 B( A: N5 X) t4 q ]4 z
<!--
4 k' o4 k% ~# F! i7 q( Y$ s
body {
: X% Y, S' a- u+ ~
font-size: 12px;
$ Z5 |7 @+ |; w2 s4 R" g
text-align: center;
% w) S' m i1 ?6 }
margin: 0px;
% I6 T1 `7 @ {# a- L
padding: 0px;
- D* g0 Z( s6 Z: m$ P- z
}
7 L2 ?( C) D1 f4 _9 J- }
#pic{
5 H- _& P& J8 \' i9 V7 N G I
margin:0 auto;
" M! b& ^1 q$ ^2 x A0 j0 t
width:800px;
^ l% e. U* Z: w8 C8 n
padding:0;
& _ q5 }0 C1 k( ~: }9 E
border:1px solid #333;
9 j5 s4 j+ K5 T, }& _/ B; b8 o: L6 e
}
1 }& v4 B' Y) V& E; j: B
#pic img{
0 C' z! s. Y- w9 o" B1 a
max-width:780px;
# Q) P3 Q" Z) u* T
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ F: i4 B) r7 J# U
border:1px dashed #000;
& V2 J* W0 w, P. d- n
}
0 h5 o7 }: d8 w* r9 I( \. l& }- E
-->
- M: \& s! b/ Y1 U& W/ D
</style>
) b- j7 Z. p; G3 D7 _- W7 Z6 _
</head>
7 N) R' h& w" k0 e4 C) [% e
<body>
' N$ _% {7 ]% N( q
<div id="pic">
- Z% w/ }7 m' O5 E7 P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 w) G8 w; S S" h
</div>
% C) U/ `1 R0 [' c
</body>
2 \* C& A* B% C4 s' i* N& {$ X% {, \
</html>
2 M5 G( r$ A. l0 m6 V
# U1 X, N2 q) ]/ d4 q& b* d
百分比适应:
7 W) g" e' }5 Z7 \% s
以下是引用片段：
7 ^: c- u: @, D" y5 g9 F _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 D, }! E# N) Q4 p
<html xmlns="http://www.w3.org/1999/xhtml";>
5 Q' |8 A/ N" g/ v; K) P. h
<head>
6 p+ L/ ^0 @( {4 P% V4 f [ w( {. e( t( u: V
<meta http-equiv="Content-Type" c />
\. }8 H$ U- i) n
<title>css2.0 VS ie</title>
- A6 {6 p- Y; T5 o. E8 o
<style type="text/css">
' q5 M4 a( K, W8 o3 ] h! B6 P6 ?2 o
<!--
9 W/ U" i( }( x0 i$ @' S! v" y+ o
body {
' q7 \, o1 s+ t2 N
font-size: 12px;
6 ^, f* B- |3 K p2 U
text-align: center;
9 h4 ~: V7 t$ `" w, p
margin: 0px;
4 y. `9 K% }; V7 k6 E& D
padding: 0px;
6 U% ^9 H8 B X2 O X* A
}
6 F) B0 m# m, Z# B( {5 _3 k
#pic{
C8 D4 A5 S) [' q1 z1 m( y, h
margin:0 auto;
+ O9 e. t. O+ u: P1 c$ t3 X
width:800px;
+ e C& u$ o% X- h! y
padding:0;
s) q9 r0 V; v8 m1 k8 \
border:1px solid #333;
! `; q9 ]% L- d2 v
}
- U/ i# X7 j9 l" z8 H( a6 |
#pic img{
& e k8 L- n. t* {& |) t
max-width:780px;
$ {1 u0 _0 G) d, l- `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* l- x D: m+ N6 X2 v: Q- c
border:1px dashed #000;
+ Z& l" T6 j0 h5 _4 @
}
- ~3 n8 I$ ~# f5 T [
-->
( K: X! n& }: ~7 A
</style>
0 K2 E6 z, C, E. F
</head>
: ^1 w6 `9 N) n( b7 I* G v
<body>
7 L( D" |+ q2 K/ |0 a
<div id="pic">
|- x+ d% u: Q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ r- w# u ` e o! Q n& } j
</div>
/ {5 S, t5 e4 e/ Y$ \+ E9 Z
</body>
. D. B7 \4 n4 c' G: J# C7 n
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
