jQuery圖片居中裁切效果

大家在做相冊列表的時候可能會遇到這樣的情況，用戶上傳的圖片大小不一，長寬不一.

1.當圖片高或寬超過父容器時截取中間部分顯示。
2.當圖片寬高小于父容器時，居中顯示。

在顯示列表時，一般顯示的縮略圖，而由于頁面設計的不同，有可能會出現顯示不同大小的縮略圖，我們可以統一生成一張大于網站所有要顯示縮略圖的大小的圖片做為縮略圖，然后在顯示時，根據以下方式在做適當的修改就可以，如果直接顯示大圖也可以這樣用，很方便，具體使用方法，看一下下邊代碼，相信你懂的。

.themes1 li{width:200px; height:200px;}/*容器寬高*/
.themes1 li a{width:200px; height:200px;}/*容器寬高*/

<div class="img-box themes1 clearfix" style="margin-top:20px;">
    <ul>
        <li><a href="#"><img src="img/001.jpg" width="300" height="372" class="t-img"></a></li>
        <li><a href="#"><img src="img/002.jpg" width="497" height="306" class="t-img"></a></li>
        <li><a href="#"><img src="img/003.jpg" width="452" height="531" class="t-img"></a></li>
        <li><a href="#"><img src="img/004.jpg" width="428" height="319" class="t-img"></a></li>
        <li><a href="#"><img src="img/005.jpg" width="85" height="85" class="t-img"></a></li>
        <li><a href="#"><img src="img/006.jpg" height="100" width="250" class="t-img"></a></li>
    </ul>
</div>

js代碼如下：

//調用
$(function(){
    zmnImgCenter($(".t-img"));//JQ的dom
    });
//圖片居中
function zmnImgCenter(obj){
    obj.each(function(){
            var $this=$(this);
            var objHeight=$this.height();//圖片高度
            var objWidth=$this.width();//圖片寬度
            var parentHeight=$this.parent().height();//圖片父容器高度
            var parentWidth=$this.parent().width();//圖片父容器寬度
            var ratio=objHeight/objWidth;
            if(objHeight>parentHeight && objWidth>parentWidth){//當圖片寬高都大于父容器寬高
                if(objHeight>objWidth) {//賦值寬高
                    $this.width(parentWidth);
                    $this.height(parentWidth*ratio);
                    }
                else {
                    $this.height(parentHeight);
                    $this.width(parentHeight/ratio);
                    }
                objHeight=$this.height();//重新獲取寬高
                objWidth=$this.width();
                if(objHeight>objWidth) {
                    $(this).css("top",(parentHeight-objHeight)/2);
                    //定義top屬性
                }
                else
                {
                    //定義left屬性
                    $(this).css("left",(parentWidth-objWidth)/2);
                    }
            }
            else{//當圖片寬高小于父容器寬高
                if(objWidth>parentWidth){//當圖片寬大于容器寬，小于時利用css text-align屬性居中
                    $(this).css("left",(parentWidth-objWidth)/2);
                    }
                $(this).css("top",(parentHeight-objHeight)/2);
                }
        })
    }