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

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

Javascript篇

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

//计算图片居中位置的信息 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; }

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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浏览器，如果不考虑，可以去掉

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/**容器的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方式

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

1 2 3 4 5 6 7 8 9 10 11

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