SOURCE

const offset = 50;
let container = document.documentElement || document.body;

let img, $mask, src; 
let x, y, w, h, tx, ty, tw, th, ww, wh;

/**
 * 背景遮罩
 */
function mask() {
  const mask = document.createElement("div");
  mask.style.cssText = `position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.1);
    transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;`;
  return mask;
}

function viewImg(evt) {
  const $img = evt.target;

  x = $img.offsetLeft;
  y = $img.offsetTop;
  w = $img.offsetWidth;
  h = $img.offsetHeight;
  src = $img.src;

  // 显示遮罩
  $mask = $mask || mask();
  container.appendChild($mask);
  setTimeout(() => {
    $mask.style.opacity = 1;
  },
  100);

  // 显示大图
  img = new Image();
  img.src = src;
  img.style.cssText = `position: fixed;
    top: ${y - container.srcollTop}px;
    left: ${x}px;
    width: ${w}px;
    height: ${h}px;
    transition: all.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;`;

  img.onload = () => {
    container.appendChild(img);
    
    let $w = img.naturalWidth;
    let $h = img.naturalHeight;

    ww = Math.max(0, window.innerWidth - 2 * (offset || 0));
    wh = Math.max(0, window.innerHeight - 2 * (offset || 0));
    
    let s = $w / ww, 
        c = $h / wh,
        l = Math.max(s, c, 1),
        d = $w / l,
        f = $h / l;

    setTimeout(() => {
      
      img.style.opacity = 1;
      img.style.height = f + "px";
      img.style.width = d + "px";
      img.style.left = (ww - d) / 2 + "px";
      img.style.top = (wh - f) / 2 + "px";
      
      // 添加移除事件
      img.addEventListener("click", () => {
        $mask.style.opacity = img.style.opacity = 0;
        setTimeout(() => {
          $mask.remove();
        	img.remove();
        }, 300)
      })
    },
    100);
  };
}

[...document.querySelectorAll(".image")].forEach((o, i) => {
  o.addEventListener("click", viewImg);
})

<img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/super/crop=0,55,1920,1196/sign=2efa614cdeca7bcb69349d6f83394756/d53f8794a4c27d1e8eef634b12d5ad6edcc43877.jpg"
class="image">
<br>

.image {
  width: 200px;
  margin: 10px;
}