实现的效果

CSS代码

/* 图片放大遮罩 */
.img-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  transition: transform 0.1s;
}

JS代码

// 图片点击放大（滚轮缩放，点击任意位置关闭）
(function () {
  var overlay = null;
  var scale = 1;
  document.querySelectorAll("#content img").forEach(function (img) {
    img.addEventListener("click", function () {
      overlay = document.createElement("div");
      overlay.className = "img-overlay";
      var clone = img.cloneNode(true);
      clone.removeAttribute("width");
      clone.style.transform = "scale(1)";
      scale = 1;
      overlay.appendChild(clone);
      // 点击任意位置关闭
      overlay.addEventListener("click", function () {
        document.body.removeChild(overlay);
        overlay = null;
      });
      // 滚轮缩放
      overlay.addEventListener("wheel", function (e) {
        e.preventDefault();
        scale += e.deltaY < 0 ? 0.1 : -0.1;
        scale = Math.max(0.2, Math.min(5, scale));
        clone.style.transform = "scale(" + scale + ")";
      });
      document.body.appendChild(overlay);
    });
  });
})();