jquery js 点击小图图片放大，根据窗口大小等比例缩放宽高度，真实高度和宽度都符合要求，高宽不变

首先引用jquery.js
dom元素

 <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:10000;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="width: 50%; display: table-cell; vertical-align: middle; text-align: center; ">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>

//点击图片放大

$(document).on('click', '#pic01 img', function () {
    var _this = $(this).attr('src');
    imgShow("#outerdiv", "#pic01", "#bigimg", _this);
})

function imgShow(outerdiv, innerdiv, bigimg, _this) {
    var src = _this;//获取当前点击的pimg元素中的src属性 
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性 
    /*获取当前点击图片的真实大小，并显示弹出层及大图*/
    $("<img/>").attr("src", src).load(function