原文地址https://blog.csdn.net/qq_28073073/article/details/88971777

話不多說開幹

/***
 * html:<img src="img/1.jpg" onclick="showimg('img/1.jpg');">
 * 圖片彈出展示,預設原大小展示。圖片大於瀏覽器時下視窗可視區域時，進行等比例縮小。
 * src 圖片路徑。必須項
 * imgHeight 圖片顯示高度，預設原大小展示。圖片大於瀏覽器時下視窗可視區域時，進行等比例縮小。
 * imgWidth 圖片顯示寬度，預設原大小展示。圖片大於瀏覽器時下視窗可視區域時，進行等比例縮小。
 */

function showimg(src) {
   if (src == "") {
       layer.msg("沒有發現圖片！");
       return;
   }
   src = "../"+src;//加入 ../ 防止找不到圖片
   var img = new Image();
   img.onload = function () {//避免圖片還未載入完成無法獲取到圖片的大小。
       //避免圖片太大，導致彈出展示超出了網頁顯示訪問，所以圖片大於瀏覽器時下視窗可視區域時，進行等比例縮小。
       var max_height = $(window).height() - 100;
       var max_width = $(window).width();

       //rate1，rate2，rate3 三個比例中取最小的。
       var rate1 = max_height / img.height;
       var rate2 = max_width / img.width;
       var rate3 = 1;
       var rate = Math.min(rate1, rate2, rate3);
       //等比例縮放
       var imgHeight = img.height * rate; //獲取圖片高度
       var imgWidth = img.width * rate; //獲取圖片寬度

       var imgHtml = "<img src='" + src + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>";
       //彈出層
       layer.open({
           type: 1,
           title: false,//不顯示標題
           closeBtn: 0,
           area: ['auto', 'auto'],
           skin: 'layui-layer-nobg', //沒有背景色
           shadeClose: true,
           content: imgHtml
       });
   }
   img.src = src;
}

效果展示: