img图片在限定尺寸下等比缩放；点击查看原图

一，图片等比缩放

效果：

html

<div class="row" id="imgbox">
    <img id="image" src="">
</div>
<div class="row">
    <div id="showimg">查看原图</div>
</div>

css（对img外层div尺寸限制，img长宽自适应）

#imgbox{
    max-width:100%;
    max-height: 400px;
    text-align: center;
}
#image{
    width: auto;/*图片长宽自适应*/
    height: auto;
    max-width:100%;
    max-height: 400px;
}

二，查看原图

添加一个展示大图的div：（点击大图关闭大图）

<div id="bigimg">
    <img src="" onclick="closeImg()">
</div>

css（设置该div绝对定位在屏幕中间）

#bigimg{
    position: fixed;
    top:50%;
    left:50%;
    display: none;
    z-index: 20;
}

js

//查看大图
    $('#showimg').click(function(){
        var image = new Image(); //创建一个image对象
        var path=$("#image").attr("src");
        image.src=path;   //新创建的image添加src
        var width = image.width;  // 获取原始图片的宽
        var hight = image.height; // 获取原始图片高
        $("#bigimg img").attr('src',path);
        $("#bigimg").css({"margin-top":-hight/2,"margin-left":-width/2});

        $("#bigimg").show();
    });

    //关闭大图
    function closeImg(){
        $("#bigImg img").attr('src',"");
        $("#bigimg").hide();
    }

参考：https://blog.csdn.net/qq_30449567/article/details/80548489