<!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>
<title>Untitled Page</title>
<link href="s_common.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
<style type="text/css">
#k_img_ul{ float:left; width:1000px; padding:18px 0 0 0; }/*通过这个ul来控制这个部分与外部的距离*/
#k_img_ul li{ float:left; width:64px; padding:0 5px; text-align:center;}
#k_img_ul li span{ width:60px; height:120px;
padding:2px; display:block; border:1px solid #ccc; }/*如果不带边框可以不要这个span*/
#k_img_ul li span a{ display:block; width:60px; height:120px;
overflow:hidden; }/*重点是红色部分*/
#k_img_ul p{ height:24px; line-height:24px;}
</style>
</head>
<body>
<ul id="k_img_ul">
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="new.jpg" id="another" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="na.jpg" id="im" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>
<br class="clear" />
</ul>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
//长宽任意设定
function makeMid(className,width,height){//参数为要对其进行操作的图片元素，设定的高度，设定的宽度
var h=className.height();//图片原本的高度
var w=className.width();//图片原本的宽度
// alert("h:"+h+"w:"+w);
if((h<height)&&(w>width))//图片原本高度小于定值，而宽度大于定值
{
var marginT=Math.round(height/2-h/2);
marginT=marginT+"px 0 0 0";
className.css({width:width,height:h,margin:marginT
});//这种情况下宽度为指定宽度
return;
}
else if((h<height)&&(w<width))//图片原本的宽高均小于定值
{
var marginTT=Math.round(height/2-h/2);
marginTT=marginTT+"px 0 0 0";
className.css({width:w
,height:h,margin:marginTT});//当宽高均小于定宽时，宽度为原图片宽度
return;
}
}
window.onload=function(){
$("#k_img_ul>li>span>a>img
").each
(function(){//这里要注意要把元素层级写明，一个也不能少还有就是each相当于循环的功能
makeMid($(this),Number(60),Number(120));
});
}
});
</script>
效果图如下：
