网上的教程大多都零散不适应，插件也都参差不齐，病毒、广告四处潜伏，还是自力更生的好。

说下原理：

  1. 全部设置只是需要一个$('.post img').each(function(){图片选择器即可；
  2. 根据提供选择器选择图片，判断图片是否被缩小了，如果被缩小，增加class样式zoomin，并设置css样式cursor: zoom-in;，鼠标指针为一个放大图标；正常判断宽度即可，这里长款都加入了判断。
  3. 然后根据增加的class操作点击行为。点击后在图片后面增加元素<div class="zoom">和关闭图标等，只是一个显示，实际点哪里都能关闭图片。禁用系统滚动条，图片支持大图滚动条，就是实际图片尺寸显示。
  4. 点击新增元素zoom，则关闭图片并且自行删除zoom元素，同时解锁body的滚动条。
  5. 整个流程就这么回事。
第一次打开不知道为什么有时候zoomin加不上，导致无法执行
把$('.post img').each(function(){换成$('.post img').on('load',function () {就可以了。

js部分

//图片点击放大
$(document).ready(function(){
    $('.post img').each(function(){ //图片选择器
      var screenImage = $(this);
      var theImage = new Image(); //新建图片容器
      theImage.src = screenImage.attr("src"); //新容器赋值图片地址
      if((theImage.width > screenImage.width()) || (theImage.height > screenImage.height()) ) { //判断长宽是否被缩小了
        $(this).addClass('zoomin'); //如果被缩小就增加zoomin
      };
    });
});
    
    $(document).on('click', '.zoomin', function() {
      var top = $(document).scrollTop(); //获取滚动条距离顶部
      $(this).after('<div class="zoom"><span class="close-zoom">&times;</span><img src="'+$(this).attr("src")+'"></div>'); //新增元素，包含关闭，图片地址等
      $('.zoom').animate({opacity:'1'}); //透明度到1，设置渐进动画
      $(document).on('scroll.unable',function (e) { //滚动到顶部的距离始终保持一个值，相当于禁用
       $(document).scrollTop(top);
      });
    });
    
    $(document).on('click', '.zoom', function() {
      $(this).animate({opacity:'0'},function(){ //透明度到1，然后自行删除，有个渐进的过程
        $(this).remove();
        });
      $(document).unbind("scroll.unable"); //解锁滚动条
    });

css部分

.zoom {
    position: fixed!important;
    display: flex;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,.8);
  transition: all .3s ease-in-out;
    overflow: auto;
}
.zoom::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
 
.zoom::-webkit-scrollbar-thumb {
    background-color: #666;
    border: 3px solid #333;
    border-radius: 3px;
}
.zoom::-webkit-scrollbar-thumb:hover {
    border-width: 2px;
    background-color: #999;
}
 
.zoom::-webkit-scrollbar-track {
    background: transparent;
}
 
.zoom img {
    margin: auto;
    padding: 2em;
    background: transparent;
  transition: all .3s ease;
    cursor: zoom-out;
    max-width: fit-content;
}
.close-zoom {
    font-size: 3em;
    color: #eee;
    line-height: 1;
    width: 1em;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    top: .5em;
    right: .5em;
    background: rgba(155,155,155,.6);
    cursor: pointer;
}
.zoomin {
    cursor: zoom-in;
}