图片大小自适应垂直居中的方法

最新推荐文章于 2026-04-29 09:24:56 发布

转载最新推荐文章于 2026-04-29 09:24:56 发布 · 6.6k 阅读

标签

#图片垂直居中

本文介绍了使用JavaScript和CSS实现图片在容器内水平垂直居中的方法，包括图片预加载、尺寸计算及不同CSS布局技巧。

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

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

}