自己用jquery写的一个图片自适应容器居中

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
$(".pic li").each(function() {
var pwidth = $(this).width();
var pheight = $(this).height();
var _img = $(this).find("img");
var iwidth = _img.width();
var iheight = _img.height();
//alert(pwidth + "-" + pheight + "-" + iwidth + "-" + iheight)
if(pwidth <= iwidth || pheight <= iheight) {
if(iwidth/pwidth > iheight/pheight) {
_img.css("width",pwidth).css("height",pwidth/iwidth*iheight);
_img.css("margin-top",(pheight-pwidth/iwidth*iheight)/2+"px");
}
else {
_img.css("width",pheight/iheight*iwidth).css("height",pheight);
_img.css("margin-left",(pwidth-pheight/iheight*iwidth)/2+"px");
}
}
else {
_img.css("margin-left",(pwidth-iwidth)/2+"px");
_img.css("margin-top",(pheight-iheight)/2+"px");
}
})
})
})
</script>
<style type="text/css">
.pic {
overflow:hidden;
float:left;
}
.pic li {
list-style:none;
width:300px;
height:200px;
border:solid 1px #CCC;
float:left;
}
</style>
</head><body>
<div class="pic">
     <ul>
         <li><img src="image/xg.jpg" /></li>
            <li><img src="image/wall6.jpg" /></li>
            <li><img src="image/wall7.jpg" /></li>
        </ul>
    </div>
</body>
</html>