jq保持图片不变形放大镜特效

<div   class="showimg" id="div">
	<img src="/img/1.png" alt="" class="show" id="img">
	<div class="showbox">
	</div>
	<div id="bigbox">
	<div class="showlarge">
		<img src="/img/1.png" alt="" id="img2">
	</div>
	</div>
</div>

css

.showimg{position:relative;width:394px;height:394px;border:1px solid #f5f5f5;float: left;
}
.show{ 
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.product-img img{margin:0 3px;width:60px;height:60px;border:2px solid #FFF;
}
.showbox{position:absolute;top:0;left:0;opacity:0.5;cursor:move;width:197px;height:197px;
    background-color:lightblue;
    display:none;
}
.showlarge{overflow:hidden;width:394px;height:394px;border:1px solid #f5f5f5;z-index: 999;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
}
#bigbox{
    position:absolute;
    top:-197px;left:207px;width:788px;height:788px;z-index: 999;
    /* display: none; */
    opacity: 0;
}
.showlarge img{position:absolute;margin: 0 auto;text-align:center
}

js

//使图片垂直居中于div
$(document).ready(function() {
        $('#img').each(function() {
    var width = $(this).width();    // 图片实际宽度
     var height = $(this).height();  // 图片实际高度
     if(width>height){
        $(this).css("width","394px");
        // $(this).css("","394px");
     }else{
        $(this).css("height","394px");
     }
    });

    $('#img2').each(function() {
        var width2 = $(this).width();    // 图片实际宽度
         var height2 = $(this).height();  // 图片实际高度
 
         if(width2>height2){
            $(this).css("width","788px");
            $('.showlarge').css("width","394x");
          
            var width2 = $(this).width();    // 图片实际宽度
            var height2 = $(this).height();  // 图片实际高度
            var heightImg=height2/4
            $('#img2').css("margin-top",heightImg+"px");
         }else if(height2>width2){
            $(this).css("height","788px");
            $('.showlarge').css("height","394px");
            var width2 = $(this).width();    // 图片实际宽度
            var height2 = $(this).height();  // 图片实际高度
            var heightImg=width2/4
            $('#img2').css("margin-left",heightImg+"px");
         }else{
            $(this).css("height","788px");
            $('.showlarge').css("height","394px");
            $(this).css("width","788px");
            $('.showlarge').css("width","394x");
            $('#img2').css("margin-top","0");
            $('#img2').css("margin-left","0");

         }
        });

    });


//鼠标移入产品主图时出现放大的细节图和小框
$(".showimg").mouseenter(function(){
$(".showbox").show();
$("#bigbox").css("opacity","1")
})
//鼠标在产品主图移动事件
$(".showimg").mousemove(function(e){
var mousex=e.clientX;//获取鼠标当前对于浏览器可视区的X坐标
var mousey=e.clientY;
var imgx=$(".showimg").offset().left;//获得产品主图对于文档的偏移坐标
var imgy=$(".showimg").offset().top;
//小框的left值是鼠标位移减去产品图元素偏移坐标减去小框宽度的一半，使鼠标保持位于小框的中间
var boxleft=mousex-imgx-$(".showbox").width()/2;//计算小框对于产品主图元素的距离用来定位
var boxtop=mousey-imgy-$(".showbox").height()/2;
//鼠标移动小框位置跟着变化
$(".showbox").css({"top":boxtop,"left":boxleft});
//计算小框移动的最大范围
var maxtop=$(".showimg").height()-$(".showbox").height();
var maxleft=$(".showimg").width()-$(".showbox").width();
//判断小框移动的边界
if(boxtop<=0){
$(".showbox").css("top","0");
}else if(boxtop>maxtop){
$(".showbox").css("top",maxtop);
}
if(boxleft<=0){
$(".showbox").css("left","0");
}else if(boxleft>maxleft){
$(".showbox").css("left",maxleft);
}
//设置放大图的位置偏移量，获取小框偏移量乘放大倍数，注意！！！放大图偏移量应设置为负值
var showleft=-$(".showbox").position().left*2;//position()方法返回当前元素相对于父元素的位置（偏移）
var showtop=-$(".showbox").position().top*2;
//此处获取小框偏移量不应该使用前面计算出来的boxtop和boxleft值，因可能会出现超出移动的边界
$(".showlarge img").css({"left":showleft,"top":showtop});
});
//鼠标离开产品主图元素事件，此处使用mouseleave事件只有在鼠标指针离开被选元素时才会触发，mouseout鼠标指针离开被选元素和其任何子元素都会触发。
$(".showimg").mouseleave(function(){
$(".showbox").hide();//小框隐藏
$("#bigbox").css("opacity","0");//放大图隐藏
});

效果图