<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta id="robots" content="all" />
<meta name="Description" content="图片垂直居中 图片等比例缩放的方法" />
<meta name="Keywords" content="图片垂直居中" />
<meta id="author" content="土人老徐 http://K.css6.com" />
<meta id="Copyright" content="Copyright 2010-2011 K.css6.com. All Rights Reserved" />
<link href="http://style.china.alibaba.com/css/fdevlib/reset/reset.css" type="text/css" media="screen" rel="stylesheet" />
<title>分享图片垂直居中，图片等比例缩放的方法 </title>
<style type="text/css" media="screen" rel="stylesheet">
.img_list ul li{ float:left; margin:10px; width:202px; height:202px; overflow:hidden; display:inline;}
.img_list ul li a{ width:200px; height:200px; overflow:hidden; display:table-cell; *display:block; line-height:200px; font-size:200px; *font-size:175px; text-align:center;border:1px solid #f00; vertical-align:middle; font-family:Arial;}
.img_list ul li img { vertical-align:middle; vertical-align:middle;}
</style>
</head>
<body>
<div class="img_list">
<ul id="img_list">
<li>
<a href="#">
<img src="http://i00.c.aliimg.com/news/upload/5000780/2_1263433563767.jpg" alt="示例图片" />
</a>
</li>
<li>
<a href="#">
<img src="http://img.china.alibaba.com/news/upload/5000260/392192_1263174952956.jpg" alt="示例图片" />
</a>
</li>
<li>
<a href="#">
<img src="http://i00.c.aliimg.com/news/upload/profile/huodong/guanghuo/03/45_1263268910318.jpg" alt="示例图片" />
</a>
</li>
</ul>
</div>
<script type="text/javascript">
/*
* auto resize image
* @param img img obj
* @param w custom width
* @param h custom height
*/
resizeImage=function(img,w,h) {
img.removeAttribute('width');
img.removeAttribute('height');
var pic;
if(document.all) {
var pic=new Image();
pic.src=img.src;
} else pic=img;
//check images exist and width&height >0 and custom width >0
if(pic&&pic.width&&pic.height&&w) {
if(!h) h=w;
if(pic.width>w||pic.height>h) {
var scale=pic.width/pic.height,fit=scale>=w/h;
if(document.all) img=img.style;
img[fit?'width':'height']=fit?w:h;
if(document.all) img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
}
}
};
window.onload=function(){
var images=document.getElementById('img_list').getElementsByTagName('img');
for(var i=0;i<images.length;i++){
resizeImage(images[i],200);
}
};
</script>
</body>
</html>
?
?如果你觉得本文介绍的图片垂直居中方法值得收藏，请附上本文的网址，谢谢。
本文出处：http://k.css6.com/?p=41