js+css图片自动等比例缩小且垂直居中
图片自动等比例缩小，其实如果不考虑ie6的话，用css就可以实现，设定img的max-width和max-height，而<img>标签内不设定widht和height即可。ie7已经支持max-width和max-height，这是为数不多的好消息之一。 但是对于ie6及以前的版本，就只能用js来设置了。在 ff 2.0/ ie6 / ie7 中测试通过。[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
.Ij ~g2~
<html xmlns="http://www.w3.org/1999/xhtml">
D-v6{^p*d
<head>
+|/l
is
o6Q
o,d
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
!H+my.`5y H:L h4d0z3S
<title>图片自动等比例缩小且垂直居中</title>
L j5c2^]
s
<!--[if lte IE 6]>
J(Xf4d"Q5g_-f3Q au
<script type="text/javascript" language="javascript">
?!O+|p4Qj(ZT zL
function imgFix() {
G&{ol z)C#OC'N
//定义要限制的图片宽高,这个宽高要同style里面定义的相同，小于限定高宽的图片不操作
Vqq#h1Z
var widthRestriction = 200;
z_l/sz#l
var heightRestriction = 200;
)Z XF,g+f UQ
var allElements = document.getElementsByTagName('*')
Q yK8Hz,L g%M:D4m
for (var i = 0; i < allElements.length; i++)
Y3Ep(I+i,Rp\
{
s_b"X uG
if (allElements[i].className.indexOf('imgBox') >= 0)
(m"\(u,gF C#c
{
)Le![[#ph
var imgElements = allElements[i].getElementsByTagName('img');
0X{:m{ v9J*H [d
for (var j=0; j < imgElements.length; j++)
;n:nq2L}e oy
{
#fkb0_BM2e9hf_)Z
\
if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction )
L7sz}"nZ
\
{
K!]|2X!},We
if ( imgElements[j].width > imgElements[j].height)
b WB| I^KY
{
bv9cnU
imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width);
%L;y1g7z Q9XP
imgElements[j].width = widthRestriction;
(e8q DP p h&bC
} else
_9B3t(Q#B5d7b'gy m
{
D+M#`9V-i\5m+EU
g
imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height);
O4M,x9r6Znu{
imgElements[j].height = heightRestriction;
| j/Tj N2Eu*f%B
}
"In G.M O
I
}
-U} gj`:I(w
if ( imgElements[j].height < heightRestriction )
AR4d7Nw9f {'@.J
{
4{O3ZR6b!tq
imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px";
[ aL%~5T6r6yjP:n
}
W;b;q6}SDw l
} /*for j*/
3L|qC!PIW6? t
}
E,{i$s KK9Y\&CX
}/*for i*/
6Uf%e|\O3UB
}
4V4\'@+O#U[+Q
p {
window.onload = imgFix;
| qj
_0p1H
</script>
w6g&`?`
X$vg
<![endif]-->
J(IQ b4g1O|
<style type="text/css">
W6g
g:mf d1}e
<!--
`3P]P&X I:U0Q5@P
* {
6PnQ*E b
margin:0;
%zFI s3r
W"[
padding:0;
1I3y'Q:Ot H^$x
}
\!I}
f(e0t1N%@"Z
.imgBox li {
{$]X S
Q g9wv*e
list-style:none;
E!@tU P(?-y W
width:200px; /* 宽度 */
8gv1@9~B|c'B4f
height:200px; /* 高度 */
Sm2A+]T
background:#ccc;
^C.K!g&d+T4l(|
border:1px solid #666;
y9J"j,d)F Mx/a
text-align:center;
V6YbmD7Z*mL
margin:5px;
Ot]I L kwZ R
line-height:200px;
5Fm
Q/s J
t
}
^+XxF G_7t!g
.imgBox img {
E6v9}&{ |/BF? Q
max-width:200px; /* 宽度 */
\p1| zW!j"D
max-height:200px; /* 高度 */
8p [s3T `$S8a
vertical-align:middle;
(t
U a;Yt$X
}
0hz3g8sAW,s.N
-->
9F:C~G&Mv"b K
</style>
+`6M,H&O](j
</head>
P]6j/h5C2N{
,^n!q$B]!te
<body>
&J9]l N8t4vyl
<ul class="imgBox">
)v MP1y ]0r6uBc ?
<li><img src="......" alt="img" /></li>
3l*e c2L)|"m
<li><img src="......" alt="img" /></li>
*\J `$mb2l ?d
<li><img src="......" alt="img" /></li>
I7m,m I"w~3uxP D
<li><img src="......" alt="img" /></li>
oIEgo2]U
</ul>
NAtP Dd
</body>
](Vbjm,ZL$ZD\j
</html>[/code]