做有态度的前端团队

网易FEG前端团队

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

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


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

手机阅读请扫描下方二维码:

none

已有 2 条评论

  1. [...]查看原文》》[...]

  2. [...]查看原文》》[...]

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif