`
inchinav5
  • 浏览: 1117 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

图片相对某元素铺满居中

阅读更多
var center = {
	init : function(obj){
		var thisFa    = obj.parent();       //获取对象父级的对象
		var this_imgW = obj.width();        //当前图片的宽度
		var this_imgH = obj.height();       //当前图片的高度
		var thisFaW   = thisFa.width();     //父元素的宽度
		var thisFaH   = thisFa.height();    //父元素的高度
		var ratioF    = thisFaW/thisFaH;    //父级宽度和高度的比例
		var ratioS    = this_imgW/this_imgH;//当前元素宽度和高度的比例
		var rarr      = center.newSize(ratioF,ratioS,this_imgW,this_imgH,thisFaW,thisFaH);
		center.imgCenter(rarr,thisFa,obj);
	},
	imgCenter : function(rarr,thisFa,obj){
		thisFa.css({'position':'relative','overflow':'hidden'});
		obj.attr('height',rarr[1]).attr('width',rarr[0]).css({'position':'absolute',
															  'top':'50%',
															  'left':'50%',
															  'margin-left':-(rarr[0]/2),
															  'margin-top':-(rarr[1]/2)
															  });//如果我自己用的话我就创建一个叫positA的class将定位写进去然后在这里直接给元素添加一个css
	},
	isWidth : function(ratioF,ratioS){
		if(ratioF > ratioS){
			return false;
		}else{
			return true;
		}	
	},
	newSize : function(ratioF,ratioS,this_imgW,this_imgH,thisFaW,thisFaH){
		var istrue = center.isWidth(ratioF,ratioS);
		var arr = new Array();
		if(!istrue){
			//以宽度为基准
			var height = (thisFaW/this_imgW)*this_imgH;
			arr[0] = thisFaW;
			arr[1] = height;
		}else{
			//以高度为基准
			var width = (thisFaH/this_imgH)*this_imgW;
			arr[0] = width;
			arr[1] = thisFaH;
		}
		return arr;
	}
}

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics