图片全屏放大展示

效果

html

<div id="outerdiv">
    <div id="innerdiv">
        <img id="bigimg" src="" />
    </div>
</div>

css

	#outerdiv {
        position:fixed;
        top:0;
        left:0;
        background:rgba(0,0,0,0.7);
        z-index:999;
        width:100%;
        height:100%;
        display:none;
    }
    #innerdiv {
        position:absolute;
        left: calc(50% - 128px);
        top: calc(50% - 128px)
    }
    #bigimg {
        border:5px solid #fff;
    }

js(需要先引入jquery)

    $(".pimg").click(function(){
        var src = $(this).attr("src");  //获取当前点击的图片的src属性
        $('#bigimg').attr("src", 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 scale = 0.8;   // 缩放比例
			var imgWidth = realWidth;  // 初始化大图宽度
			var imgHeight = realHeight;  // 初始化大图高度
			if (realWidth > windowW * scale) {  // 宽度超出要显示范围
				imgWidth = windowW * scale;  // 重新赋值宽度为最大显示宽度
				mgHeight = imgWidth / realWidth * realHeight;  // 等比例缩放高度
                if (imgHeight > windowH * scale) {  // 缩小后若宽度仍超出要显示范围
                    imgHeight = windowH * scale;  // 再对宽度进行缩放
                    imgWidth = imgHeight / realHeight * realWidth;  // 等比例缩放宽度
                }
			}
            if (realHeight > windowH * scale) {  // 宽度超出要显示范围
                imgHeight = windowH * scale;  // 重新赋值宽度为最大显示宽度
                imgWidth = imgHeight / realHeight * realWidth;  // 等比例缩放宽度
                if (imgWidth > windowW * scale) {  // 缩小后若宽度仍超出要显示范围
                    imgWidth = windowW * scale;  // 再对宽度进行缩放
 				    mgHeight = imgWidth / realWidth * 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及.pimg
        });

        $('#outerdiv').click(function(){  // 再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    });