偶尔会有这样的需求：在不知道图片宽和高情况下，需要让图片水平和垂直居中在某个容器下，而且，如果图片宽或者高超出容器，需要按照比例进行缩放，下面介绍几个常见的方式：
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=
如果觉得《html图片自适应上下左右居中显示 图片大小自适应垂直居中的方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
