JS让任意图片垂直水平居中且页面不滚动

说一下以前遇到的一个问题：

假设有一张小图，要实现点击查看大图的功能，而这个图的宽高可能会超过浏览器的宽高，这时候我们通过JS来改变图片的宽高，从而实现图片在浏览器居中显示且不滚屏。

方法如下：

首先你要给小图添加一个点击事件，不多赘述。

showBigImg(e) {    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;    if (e.target.naturalHeight && e.target.naturalWidth) {        const naturalHeight = e.target.naturalHeight;        const naturalWidth = e.target.naturalWidth;        const rh = h - naturalHeight;//浏览器视图宽度-图片宽度=rh        const rw = w - naturalWidth;//浏览器视图高度-图片高度=rw        if (rh >= 0 & rw >= 0) {//图片宽高未超出浏览器视图宽高            cimg.style.height = "auto";            cimg.style.width = "auto";            cimg.style.top = rh / 2 + "px";            cimg.style.left = rw / 2 + "px";        } else if (rh >= 0 & rw < 0) {//图片宽度超出浏览器视图宽度，且高度未超出浏览器视图高度，将图片的宽度改变为浏览器视图宽度，图片的宽度等比例缩小            cimg.style.width = w + "px";            cimg.style.height = "auto";            cimg.style.left = 0;            let newrh = h - cimg.offsetHeight;//浏览器视图宽度-改变后图片高度=newrh            cimg.style.top = newrh / 2 + "px";        } else if (rh < 0 & rw >= 0) {//图片高度超出浏览器视图高度，且宽度未超出浏览器视图宽度，将图片的高度改变为浏览器视图高度，图片的宽度等比例缩小            cimg.style.height = h + "px";            cimg.style.width = "auto";            let newrw = w - cimg.offsetWidth;//浏览器视图宽度-改变后图片宽度=newrw            cimg.style.left = newrw / 2 + "px";            cimg.style.top = 0;        } else {//图片宽高均超出浏览器视图宽高，将图片宽高改变为浏览器视图宽高            cimg.style.width = w + "px";            cimg.style.height = h + "px";            cimg.style.left = 0;            cimg.style.top = 0;        }    }}