html图片自适应上下左右居中显示,图片大小自适应垂直居中的方法

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

Javascript篇：

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

functiongetImgSize(img,maxWidth,maxHeight){

varratio,

picW    = img.width,

picH    = img.height,

wRatio  = maxWidth / picW,

hRatio  = maxHeight / picH;

if(wRatio 

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

}

}

//预加载图片

functionloadImg(url){

varimg = document.createElement("img");

img.onload = function(){

//调用计算方式

getImageSize(img,容器宽度,容器高度);

//塞进页面

}

img.src = url;

}

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

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

varimg = document.createElement("img");

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

}