标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
+ R0 v' h& @& b: @5 g; I
关键在于：max-width:780px;以及下面那行。
& f% o. L% ?9 R) [+ p, S$ N4 |: X2 x
固定像素适应:
8 L! B$ L. Q% c, j0 r
2 B7 z; O0 g" \! h- M3 O
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> 以下是引用片段：
1 v$ c' P/ f1 _; A6 v. P; b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% [9 B- h; K3 R9 G0 l Q1 x+ c! f
<html xmlns="http://www.w3.org/1999/xhtml";>
5 T; L* |1 J- P' |
<head>
2 M- A" B* V( u2 g" `( |
<meta http-equiv="Content-Type" c />
9 ^ @2 r1 y& m3 M! | Q
<title>css2.0 VS ie</title>
! ~. N# u- v. H0 `0 U$ I) W1 U9 [
<style type="text/css">
4 V F) k1 I7 s- ^: n
<!--
" k' m8 t, i9 }) v; ~7 ^3 s( _
body {
% w/ o, w: W1 q8 _3 j+ L
font-size: 12px;
: B7 q- W% [' V3 w/ C0 } A# I
text-align: center;
2 w0 `& f0 N9 _3 y* s1 l
margin: 0px;
4 y2 h# A9 P7 X" K# r
padding: 0px;
# t+ h( D. ^: m* A
}
! P; |' x: X6 {7 X3 v
#pic{
) a8 g; w( M& d
margin:0 auto;
' ?; h3 f \2 h
width:800px;
+ j/ h+ V: ]4 X
padding:0;
0 R' ] h. C) U% S8 I0 P
border:1px solid #333;
/ I2 n+ \! S/ o1 b
}
( Q. R% j3 n! g' r/ p5 D' j) a0 Z
#pic img{
) K5 K# w A% j1 g
max-width:780px;
& Z3 c5 g( t- ]( ^' m
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! F6 P, J# A7 K
border:1px dashed #000;
K2 p& ~6 \0 v
}
7 }+ n* V1 ^6 g0 X5 c9 x
-->
6 r5 g3 k+ F' K2 g( f% U6 V, @, M
</style>
& a9 O7 \$ G0 z
</head>
~) i& O+ E0 p) q4 |
<body>
8 i1 _- p Y' z. W5 ?
<div id="pic">
( p0 a# n9 Y3 l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 V7 K8 \6 j) M
</div>
& Q- p% W; m3 f+ P4 j
</body>
6 G! j- {. h2 k3 ~
</html>
& f, Z5 m8 S; ]. s# ~
1 l" g6 ^7 @3 l# x5 s( m
百分比适应:
4 p# |& |. ?, p6 i; l
以下是引用片段：
8 |* T- K& L" t) R" b4 Y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
8 ]" f; C- C: {$ r( D* J
<html xmlns="http://www.w3.org/1999/xhtml";>
! a: `) I9 z& R/ D
<head>
. g% X6 {* K- {* A* a; {; |
<meta http-equiv="Content-Type" c />
- r; j; s( j s$ D: [, l$ i
<title>css2.0 VS ie</title>
& s' n7 S8 F8 t
<style type="text/css">
# c7 n0 r7 C1 R8 x* F2 W0 g% m
<!--
" a+ {7 f+ R; T% r% e/ P9 J
body {
- _8 |, d3 r" R" t8 g! E" W2 O( b
font-size: 12px;
3 x! X+ g7 v1 }2 ?3 P- f1 i
text-align: center;
2 G6 C+ W2 c* e! I
margin: 0px;
, X% f( H' S9 s9 }
padding: 0px;
7 g+ ]$ C/ ~: e/ t/ @$ [
}
+ d4 ?& }3 ?3 G/ R! }9 L
#pic{
1 r* F0 m: o$ o {
margin:0 auto;
; T8 d2 o( ]; `# Z5 P% N
width:800px;
3 I# X7 \$ O* k
padding:0;
1 D3 K8 }0 p1 V% e
border:1px solid #333;
8 [7 R: p5 n, T; r3 H: L1 R: T' n) V
}
0 L/ q2 p+ b: Y0 N/ H7 w
#pic img{
' H3 [! b: S! t% B3 u4 p
max-width:780px;
% w- c* O9 T: ?, l, d: ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& B8 T" D$ G$ C0 g8 H' M! B
border:1px dashed #000;
9 R: i4 H- R5 H5 q% M2 z1 N
}
' |( V; h9 J5 [% w
-->
: l. k2 K P, d8 u
</style>
% x! ]# H2 b3 d: b6 F7 J" D
</head>
5 \' a7 b* R, B" B- y D) h9 F# i
<body>
. Z. q* j; {; s. ` [ r. K
<div id="pic">
& s# v- r E# i4 X6 ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 n6 o& M; G/ I
</div>
* t4 q& ~) P0 e" _
</body>
5 G! e" V3 ] s
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
