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

Posted 2020-09-22 东风杨柳岸，岁月如烟

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

       假设有一张小图，要实现点击查看大图的功能，而这个图的宽高可能会超过浏览器的宽高，这时候我们通过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;
        }
    }
}