标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
4 f# v5 F. O' V' a/ O5 u" ?
关键在于：max-width:780px;以及下面那行。
5 _% ~# f1 t; `: X
固定像素适应:
S% ?' \% ~) b3 [, n1 o; x
6 }/ p9 B1 |, G8 }6 ~
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 x0 i" c" H, g/ D" ^4 j! Z9 r/ j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 F1 _2 Z# s2 M6 \
<html xmlns="http://www.w3.org/1999/xhtml";>
+ D+ t. }" d$ r' c" x( J
<head>
( H! c) Q. t& A! u" C# w
<meta http-equiv="Content-Type" c />
2 t% H7 m8 P- K. H
<title>css2.0 VS ie</title>
8 U$ V5 n, y7 y4 s# j- a
<style type="text/css">
- \( m0 h1 U- [0 U
<!--
1 {( D, D4 \: v6 E; S
body {
# q) D0 q0 y: d/ u, X1 Q# U
font-size: 12px;
) p0 b1 ?' t- v
text-align: center;
; W/ f7 |7 N2 c. Y+ e( \
margin: 0px;
. t I% b5 L0 f7 f! C% ^6 C
padding: 0px;
2 Z# D/ Y8 o/ ^/ P+ _5 l
}
9 I- G. b- t( j7 |/ s
#pic{
9 K9 e4 I2 h, E4 r/ f8 e2 \1 Y. _
margin:0 auto;
. J2 {" L8 Q" A/ W; R% e
width:800px;
3 j. d% q/ |" S. g/ c9 i3 k' C* \
padding:0;
7 @9 e7 ^1 _9 o; w
border:1px solid #333;
; l; c- k. p, J' b I! F; y
}
# F; n5 }+ D/ e& P; |: P
#pic img{
/ `; h. \8 N! Z1 d
max-width:780px;
; X7 c; Z6 O8 D1 h8 I9 X, c& N
width:expression(document.body.clientWidth > 780? "780px": "auto" );
X" U! k5 ?5 o" O( X( C
border:1px dashed #000;
, d7 V0 ]' O( r) E5 d- I
}
1 X* G% K" K" i; e
-->
6 S; A$ ^" ]! v' G* ~/ N8 m
</style>
" _5 _) _( b' Y4 ^4 N
</head>
0 E: `& n) ]+ O, b. V
<body>
" }4 B% U! q( T2 a# V0 t" n! V
<div id="pic">
! P$ D! i l3 ^
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 [" ]$ Q N7 x. ?8 c) ]
</div>
7 j$ X6 i9 N5 X5 Q! q/ Q) T7 Z4 l
</body>
2 Z$ H# u! p9 X N3 \
</html>
" u( _9 p+ ~3 x; Z; ]
& z2 t5 I* b Z
百分比适应:
; ?0 O. O3 q0 V9 y
以下是引用片段：
. R; h* r( w4 ]; B, ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( I" R4 H+ |; L4 I+ ~3 J2 `
<html xmlns="http://www.w3.org/1999/xhtml";>
0 ?0 n n1 }/ a+ F0 f8 u7 z
<head>
" a: t5 e T* @: B- I( R1 E9 k# H
<meta http-equiv="Content-Type" c />
) C, M3 N" ~: [) x6 M! @) Q
<title>css2.0 VS ie</title>
. B0 ^0 h9 }2 C9 L
<style type="text/css">
& W$ {0 y/ K6 G6 q4 x Q% T
<!--
; C! I3 }% }$ E. E. c. X
body {
& F, W; u# b1 h) Y
font-size: 12px;
9 w- t* r s/ I* ]: t8 B' t
text-align: center;
3 f* `# Z: z( t" b6 d# k
margin: 0px;
8 R" j1 N; e' d+ F+ f
padding: 0px;
+ T/ ]+ W5 _; y
}
) }7 I' \; B6 f5 n2 R
#pic{
$ R2 i1 ^2 L3 r5 ^6 [7 U
margin:0 auto;
4 Y# V6 s- {" n8 b) x/ |. Y; o
width:800px;
. {- d" i* G& O+ Y
padding:0;
& K% d3 m2 P6 K1 _0 B
border:1px solid #333;
y3 b6 f$ {# _$ l1 N
}
# E1 [8 n4 q" S* T
#pic img{
5 X3 ?- |$ D4 j1 @) V
max-width:780px;
0 m6 L* c. R7 k. a1 @3 O
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ ]' F8 Q: l7 K" {/ q) e1 ~- U
border:1px dashed #000;
/ p- d* c! S5 q# V
}
+ R* r% {, w9 _+ E/ c; I
-->
: e; h0 @/ c/ s( z; K
</style>
+ O7 b8 ]1 J4 @# g
</head>
8 R! x1 p& D0 }) U9 i: G! Z6 S
<body>
/ k' M- V" s" `( J/ Q2 \- Y3 q
<div id="pic">
0 w1 [ I+ f( I# V+ U
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
; q0 b2 M* m0 E/ V" G) F% x6 I
</div>
! c8 `- `* G: D; S' t! q5 `
</body>
7 g( u. s0 C- U) s/ U$ X
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
