jQuery图片正当中裁切效果

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);
				}
		})
	}