html点击图片img标签 将图片显示为原始图片大小

// 点击图片放大功能，需要在页面引入以下代码

// 点击查看图片放大功能

.show-bigImg{
  width: 1200/@rem;
  height: auto;
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
}
.show-bigImg img{
  max-width: 100%;
  max-height: 800/@rem;
}
.mengceng{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.7);
  display: none;
}

/*

<!--点击查看大图模块--> <div class="mengceng"> <div class="show-bigImg"> <img src="" alt="" id="bigImg" οnclick="closeImg(this)"> </div> </div> */

// 给img图片标签添加onClick=“bigImg（this）”事件
function bigImg(obj) {
    var image = new Image(); //创建一个image对象
    var path = obj.src;
    image.src=path;   //新创建的image添加src
    var width = image.width;  // 获取原始图片的宽
    var hight = image.height; // 获取原始图片高
    $("#bigImg").attr('src',path); 
    $(".show-bigImg").css({"margin-top":-hight/2,"margin-left":-width/2});// 居中；css中使用了fixed定位top：50%；left：50%；
    $(".mengceng").css("display","block");
    if (width>1200) {
        $(".show-bigImg").css({"margin-left":-1200/2});
    }
    if (hight>800) {
        $(".show-bigImg").css({"margin-top":-800/2});
    }
}
// 点击放大图片关闭
function closeImg(obj) {
    $("#bigImg").attr('src',"");
    $(".mengceng").css("display","none");
}