jQuery 查看原图

    <div id="app" style="width:200px; height:auto; overflow:hidden">
        <img src="https://img0.baidu.com/it/u=690174973,2447745185&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=720" alt=""
            id="imgUrl" onclick="handleGallery(this.src)" style="width:200px; height:auto; overflow:hidden">
    </div>
    <!-- 查看原图 -->
    <div class="gallery" id="gallery" hidden>
        <div class="gallery-content">
            <img src="" alt="" id="bigImgUrl" onclick="handlezoom()" class="gallery-content-img">
        </div>
        <div class="gallery-close" onclick="closeGallery()">
            <span class="gallery-close-icon">X</span>
        </div>
    </div>

.gallery {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.gallery .gallery-content {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.gallery .gallery-content .gallery-content-img {
  cursor: zoom-in;
  max-width: 100%;
  max-height: 100%;
}
.gallery .gallery-close {
  position: absolute;
  cursor: pointer;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(56, 54, 54, 0.6);
  transition: 0.2s;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
  color: #fff;
}
.gallery .gallery-close .gallery-close-icon {
  width: 30%;
  height: 30%;
}
.zoom-in {
  max-height: inherit !important;
  cursor: zoom-out !important;
}

    // 放大/缩小图片
    function handlezoom() {
        $("#bigImgUrl").toggleClass("zoom-in")
    }

    // 关闭
    function closeGallery() {
        $("#gallery").hide()
    }
    // 查看原图
    function handleGallery(val) {
        $("#gallery").show()
        $("#bigImgUrl").attr("src", val)
    }