标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' [' ~8 b$ N3 p
关键在于：max-width:780px;以及下面那行。
, ~' d) ~8 G) D9 R
固定像素适应:
k- }8 h8 j/ H S
Z3 r! ]1 ?; c9 Z: v. S; s k1 K* A
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> 以下是引用片段：
6 S; U7 O. l' t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
) c! s, k$ w4 y2 t3 u
<html xmlns="http://www.w3.org/1999/xhtml";>
: R% a, p$ a% }
<head>
q3 U+ f6 N* Y. d. i
<meta http-equiv="Content-Type" c />
. T6 r7 Q1 B/ v( i% d: j, f- k
<title>css2.0 VS ie</title>
5 y8 g- H. p0 q9 E# }( G
<style type="text/css">
$ W5 @' ]9 p8 f6 V; H6 O$ f
<!--
! C8 n/ I- X: x: U! E" {
body {
/ N. [) J) B8 N2 [- T' `; F
font-size: 12px;
7 M& H* q8 X+ Y) {8 k
text-align: center;
. o# O- S7 r% v9 i. Q5 ^- C
margin: 0px;
2 t+ L+ p8 ~+ a; l' S
padding: 0px;
, L3 X2 P/ [ Z
}
; _/ c* j& n& Y! L9 d# e
#pic{
4 j* x6 H! J: j' }6 E1 P, k" m
margin:0 auto;
% A: Q* l* z$ e! f# W# S! R
width:800px;
9 W. [3 x. J* q+ r
padding:0;
8 C* L; R' B* e+ b
border:1px solid #333;
3 O- a: c9 I$ a0 w
}
9 L1 y7 U2 y3 X* T& \
#pic img{
2 f2 A4 h9 B* I5 [5 a0 t
max-width:780px;
7 U$ z1 I n& ]" S
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! f1 t" A! @) e3 k7 q5 m0 a* p
border:1px dashed #000;
8 ~0 S6 N! j0 A( m5 j0 E+ z" p
}
0 ~5 H6 W5 n* ?1 k, e! ]9 I
-->
8 ~+ V& z+ `- {) C9 m( k& X. q
</style>
! V7 A6 @% O7 g+ B
</head>
1 y6 B4 I& u( @9 m5 G2 _, O
<body>
V( M8 M9 v/ ^0 z B8 y* d/ _
<div id="pic">
" v) ]- @ x5 X; F' Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 s" L0 y$ B% T" `" F) ]% L5 J
</div>
6 d7 V3 e; C, `
</body>
Y2 e8 B" @9 G
</html>
5 E2 T3 |0 s; i P; d2 O
' o8 W7 a; B9 k! W" @6 U0 X$ Z
百分比适应:
3 }4 T Z6 ?) D
以下是引用片段：
3 W( j3 B m( H( G. o9 F' m7 _4 D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 c/ m5 M3 r# G! I. u
<html xmlns="http://www.w3.org/1999/xhtml";>
3 X0 y# S" j/ |6 c1 L3 a
<head>
]% _! ?& S- T6 F; F1 ~8 ]) |9 j
<meta http-equiv="Content-Type" c />
; t4 o6 p) \, ~% Y5 t1 J$ Q
<title>css2.0 VS ie</title>
# ~/ X/ s; Y# @; c$ m+ J
<style type="text/css">
2 ~( N- n# s+ I2 }7 B* F
<!--
1 k" \( S1 A+ `0 W! Z
body {
" c- c0 E% F' O7 M4 h& b9 k
font-size: 12px;
2 d% q, N1 ^9 o3 }3 e4 i' M
text-align: center;
1 M, C" m2 z& s2 g0 ?
margin: 0px;
5 F( V( o, l: z' G. Z8 ~$ o; R% X
padding: 0px;
; [& E/ o) f9 i9 I, E) h0 R" ?$ J) s
}
8 [8 x5 X& P+ g. |
#pic{
# ?6 U/ q+ c6 O& c8 B3 V
margin:0 auto;
3 |4 {% X1 X9 R/ Q' z5 h% ?/ F
width:800px;
9 J8 b. S0 z' C5 m7 W9 b( f0 N
padding:0;
6 {' r4 C, X( L k7 R
border:1px solid #333;
& ^, z4 i6 {+ ~' Q
}
/ d8 O% A4 h) s3 |! m
#pic img{
$ G5 W9 I/ \. u% ?! B% U+ l' z
max-width:780px;
1 V* a, S- E {$ y
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
6 P, z- U' i' M" M) l
border:1px dashed #000;
1 {) S! H, ^) a. V
}
6 _2 V/ f4 Y/ V% X3 j; V
-->
* U; o: `& w/ U4 U7 f
</style>
- c8 r( m2 Q0 Y
</head>
! s* I' C, Y; r
<body>
% m! ~9 j q [- C& q, G3 Y3 y
<div id="pic">
+ \& n- z% t, T7 R4 P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- t z9 l$ P. @+ N7 D
</div>
5 K7 T* Q& l0 H: k
</body>
& D. j1 O8 d+ [# i
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
