说一下以前遇到的一个问题： 假设有一张小图，要实现点击查看大图的功能，而这个图的宽高可能会超过浏览器的宽高，这时候我们通过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;
}
}
}
this is a good article!