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