关于图片垂直居中的几个方法
偶尔会有这样的需求：在不知道图片宽和高情况下，需要让图片水平和垂直居中在某个容器下，而且，如果图片宽或者高超出容器，需要按照比例进行缩放，下面介绍几个常见的方式
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%);
}
手机阅读请扫描下方二维码：
上一篇：浅谈跨域的几种方式
下一篇：bootstrap3入门运用
[...]查看原文》》[...]
1
555
1
555
1
1
1
1
1
1
1
1
1
1
1
[...]查看原文》》[...]
555
555
555
555
1
12345678
12345678
12345678
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
555
1
555
1
1
1
1
1
1
1
1
555
1
1
555
1
555
1
1
1
1
1
1
1
1
1
1
1
1