<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>


//图片点击事件
$(".bigImg").click(function () {
var _this = $(this);//将当前的图片元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});


function imgShow(outerdiv,innerdiv,bigimg,_this){

//获得当前图片的src属性
var src=_this.attr("src");

//将当前的图片路径赋值给bigimg
$(bigimg).attr("src",src);

//获取当前点击图片的真实大小，并显示弹出层及大图
$("<img/>").attr("src",src).load(function(){

var windowW=$(window).width();//获取当前窗口的宽度    

var windowH=$(window).height();//获取当前窗口的高度

var realWidth=this.width;//获取图片的真实宽度

var realHeight=this.height;//获取图片真实高度

var imgWidth ,imgHeight;//缩放后的宽和高

var scale=0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

//判断图片高度
if(realHeight>windowW*scale){

imgHeight=window*scale;//如大于窗口高度，图片高度进行缩放

imgWidth =imgHeight/realHeight*realWidth;//等比例缩放宽度

if(imgWidth>windowW*scale){//如果宽度还是大于窗口宽度 再次进行缩放

imgWidth=windowW*scale;

}

}else if(realWidth>windowW*scale){//如果图片高度合适，判断图片宽度

imgWidth=windowW*scale;//如果大于窗口宽度，对图片宽度进行缩放

imgHeight=imgWidth/realWidth*realHeight;//等比例缩放高度

}else{

imgWidth=realWidth;

imgHeight=realHeight;
}

$(bigimg).css("width",imgWidth)//以最终的宽度对图片缩放

var w=(windowW-imgWidth)/2;//计算图片与窗口左边距

var h=(windowH-imgHeight)/2;//计算图片与窗口上边距

$(innerdiv).css({"top":h,"left":w});//设置#innerdiv的top和left属性

$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及图片

});

$(outerdiv).click(function(){//再次点击淡出消失弹出层

$(this).fadeOut("fast");

});
}    

https://blog.csdn.net/qq_36375934/article/details/78952485