• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

关于图片垂直居中的几个方法

技术分析 Tomy 174次浏览 已收录 0个评论 扫描二维码

关于图片垂直居中的几个方法

  • 偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式

Javascript篇

用JS的方式处理解决图片,思路就是预加载图片,然后取宽和高,计算位置,设置margin值,达到目的

 

//计算图片居中位置的信息
function getImgSize(img,maxWidth,maxHeight){
 
    var ratio,
        picW    = img.width,
        picH    = img.height,
        wRatio  = maxWidth / picW,
        hRatio  = maxHeight / picH;
    if(wRatio < 1 || hRatio < 1){
        ratio   = Math.min(wRatio, hRatio);
        picW    = parseInt(picW * ratio);
        picH    = parseInt(picH * ratio);
    }
 
    sPaddingTop = (maxHeight - picH)/2;
 
    return {
        width : picW,
        height : picH,
        left : (maxWidth - picW)/2,
        top : (maxHeight - picH)/2
    }
}
//预加载图片
function loadImg(url){
     
    var img = document.createElement("img");
    img.onload = function(){
        //调用计算方式
        getImageSize(img,容器宽度,容器高度);
        //塞进页面
    }
    img.src = url;
}

上面是比较普遍的方式,但就是需要加载完整张图片才能计算和显示出来,要是图片很大,就等死人了

改良方法,图片宽和高,并不需要加载完毕才能获取得到,发请图片请求后,只要服务器响应了,开始下载图片时候,宽和高就会返回,这个时候就能获取得到了

 

function loadImg(url){
    var img = document.createElement("img");
    var timeId = 0;
     
    img.onload = function(){
        //避免重复计算
        if(!timeId){
            //调用计算方式
            getImageSize(img,容器宽度,容器高度);
        }
        clearInterval(timeId);
        timeId = 0;
    }
    //利用计时器,不断去取图片的宽度
    timeId = setInterval(function(){
        if(img.width){
            //避免重复计算
            if(!timeId){
                //调用计算方式
                getImageSize(img,容器宽度,容器高度);
            }
            clearInterval(timeId);
            timeId = 0;
        }
    },50);
}

上面方式是利用计时器不断取图片的宽度,发现有值就可以停止取了,测试发现,在首次加载图片情况下,计时器是比onload触发快很多倍

 

CSS篇

利用纯CSS也能实现图片的垂直、水平居中

一、传统方式

主要是利用表格的居中方式,带*的是为了兼容IE6浏览器,如果不考虑,可以去掉

 

/**容器的css*/
.box {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    *display: block;
    *font-size: 175px; //这个值很奇怪,需要是容器的高度的82.5%,具体数值需要在实际中稍微调整
    *font-family:Arial;
    width:200px;
    height:200px;
}
/**图片的css*/
.box img {
    vertical-align:middle;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}
二、CSS3方式

在移动端可以使用这种方式

img{
    position: relative;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明关于图片垂直居中的几个方法
喜欢 (1)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址