标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 q' W3 V3 d- R7 A
关键在于：max-width:780px;以及下面那行。
, N1 Z7 ~) W! p
固定像素适应:
8 _# ~, t( `# Y9 r
4 {# D; h! h' j: G) L: {: Q
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> 以下是引用片段：
3 @9 D4 Z. N7 l$ k& \' P$ `# {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 d/ b* i& z% }; M" v
<html xmlns="http://www.w3.org/1999/xhtml";>
' i, n& `4 d1 a0 W2 i
<head>
! h, f4 P% U" x) K6 w. n
<meta http-equiv="Content-Type" c />
% T/ l+ N L, L5 L& I5 ?+ k
<title>css2.0 VS ie</title>
5 c! B5 x" @4 y0 J
<style type="text/css">
8 _4 Q% R9 F" v* B/ G7 y. K' D
<!--
) h9 @; t8 d# G9 k
body {
0 `9 _: ^4 Z Y& ~% s2 C8 @- Q1 U
font-size: 12px;
{2 I9 z" `4 M# ^/ B# N
text-align: center;
1 p6 l7 ?* E" x- b( |" [. z
margin: 0px;
0 ]' X/ U& p* l& f
padding: 0px;
, c: [( S0 J2 e) ^
}
- H7 Z& e8 z, a0 H1 S9 b( Z8 b
#pic{
6 F8 i) L6 A1 t0 x
margin:0 auto;
; \$ [! s3 V2 F. z& c2 Z
width:800px;
. T. q0 d' W5 r8 H* _% u0 N
padding:0;
: Y I z9 A4 N3 H5 k
border:1px solid #333;
W" |. S. J9 f, ^0 k
}
, k8 m0 U9 \1 |$ H$ z% h2 `
#pic img{
( _3 P# k2 d' h( X
max-width:780px;
" y; p- S4 Z& \. B. b% `* K
width:expression(document.body.clientWidth > 780? "780px": "auto" );
4 ]: a3 `4 l1 b
border:1px dashed #000;
# S. ^- a. R* g8 q0 s# ]: M2 a M: n
}
( V/ o$ F) j2 f5 L
-->
" K+ Y5 H8 y/ s' l
</style>
1 k" C: Z! P: R. c
</head>
4 n$ F! h: i: [, `
<body>
9 }% y+ u: J1 C) e: q! P' C/ S
<div id="pic">
8 p f$ ^# Z: z/ Y
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
I- i, Y4 B+ r2 v$ q: M7 U
</div>
' ]. ^& f: i9 e
</body>
2 k# w& q7 c l. V
</html>
3 B# G3 I! v5 P+ m% @! @
5 G4 O+ N0 s t4 Q1 T1 t) Z, ^) Q. {
百分比适应:
# `% v. d7 X" W& x4 \5 z
以下是引用片段：
( b& \. S5 ^. ]" `; n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 n, J# F& b/ \ o+ w
<html xmlns="http://www.w3.org/1999/xhtml";>
5 f) T4 T* G( ?+ X
<head>
& R( t6 @7 {7 I/ \
<meta http-equiv="Content-Type" c />
) |: u/ H* [9 X9 _5 p8 G6 C0 d. Q/ ]
<title>css2.0 VS ie</title>
' ]. H0 ~" v% V5 c4 `* w w5 Z
<style type="text/css">
' V2 T ~7 `/ a$ d, ^
<!--
6 H- N6 _, O0 L3 }( S: y# I- J, A) t3 b
body {
$ B% S5 a, x1 s% o2 O
font-size: 12px;
) \3 }, S: }- Y* p. y. S
text-align: center;
9 H* [1 ^& I0 P* l
margin: 0px;
- z' ?+ z5 t5 j1 p# U4 L6 Q
padding: 0px;
" X- X* `9 ^7 |% g, O4 c. u
}
9 n5 {# l' _' m& J
#pic{
7 w: O2 z# P. U# O2 } b; s
margin:0 auto;
1 H V& w; J) N- J: i
width:800px;
7 j0 h3 K6 @1 {) \3 l
padding:0;
; f" ]8 z% n5 q2 _. j o
border:1px solid #333;
; v/ |3 W9 x0 I* w
}
- }4 F) t0 U4 [5 a: X7 }; D4 W( W
#pic img{
7 i% j/ v& `5 {/ s
max-width:780px;
" K4 R1 R; X6 ]& \$ a
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 `0 v$ F1 N. _' u+ q
border:1px dashed #000;
( K+ @+ t# f6 R& ?
}
/ q$ N$ o6 N/ S% ?; p& v
-->
+ `& s0 Q( |6 E% _2 n4 |: ]! c
</style>
/ `/ t* u5 h, S# }- g+ V
</head>
) q' j( B+ d# K( r
<body>
H) `9 |" _2 |' o2 |) x% m" |
<div id="pic">
0 y; S/ C. w5 X1 a# z- z6 f9 M9 t
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( v( f( l. R2 J4 d E! \9 h; t
</div>
6 a- `3 F9 u, f" B! J, e1 {: i
</body>
7 N9 F8 j/ p6 [- u3 }9 _" E
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
