图片大小自适应垂直居中的方法 – CSS – 前端 css 4边阴影

Javascript篇：

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

//计算图片居中位置的信息functiongetImgSize(img,maxWidth,maxHeight){varratio,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}}//预加载图片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*/.boximg{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%);}