您的位置:首页 > 移动开发

解决移动端等比例图片上下左右居中的方法

2017-07-21 00:00 337 查看
摘要: 本方法用jquery,用js原生也是一样的逻辑的。

function imgTheMiddle(obj,objImg) {
var imgObjWidth=obj.width(),imgObjHeight=obj.height(),imgObjImgWidth=objImg.width(),imgObjImgHeight=objImg.height();
if(imgObjWidth==imgObjImgWidth && imgObjHeight>imgObjImgHeight){
objImg.css({
maxHeight:"100%",
width:"auto"
});
var imgObjWidth2=obj.width(),imgObjHeight2=obj.height(),imgObjImgWidth2=objImg.width(),imgObjImgHeight2=objImg.height();
if(imgObjImgWidth2>imgObjWidth2 && imgObjHeight2==imgObjImgHeight2){
objImg.css({
"margin-left":-((imgObjImgWidth2-imgObjWidth2)/2)
});
}
}else if(imgObjWidth==imgObjImgWidth && imgObjHeight<imgObjImgHeight){
objImg.css({
"margin-top":-((imgObjImgHeight-imgObjHeight)/2)
});
}else if(imgObjHeight==imgObjImgHeight && imgObjWidth>imgObjImgWidth){
objImg.css({
hegiht:"auto",
maxWidth:"100%"
});
}
}

imgTheMiddle($(".info .info-content .room-img"),$(".info .info-content .room-img img"));
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: