jQuery图片居中裁切效果

admin

发表文章数:3253

给img标签添加样式.t-img

<img src="images/1.jpg" class="t-img">

注:需要给img标签的父层定义宽高

//调用
$(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("margin-left",(parentWidth-objWidth)/2);
					}
				$(this).css("margin-top",(parentHeight-objHeight)/2);
				}
		})
	}

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《jQuery图片居中裁切效果》 发布于2019-04-19

分享到:
赞(0) 打赏

评论 抢沙发

3 + 7 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册