I am using jQuery UI to resize an image with its aspect ratios preserved but .resizable() is messing with the original aspect ratio of the image on IE and edge(latest versions)

I am using jQuery UI to resize an image with its aspect ratios preserved but .resizable() is messing with the original aspect ratio of the image on IE and edge(latest versions)



The first image is without the resizable(); and the second is with resizable(). As you can clearly see the aspect ratio is damaged can anyone help me with this please? the code is here -


<html>
<head>
<link rel="stylesheet" type="text/css" href=" http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style type="text/css">
div{
  width: 700px;
  height: 700px;
  overFlow: scroll;
}
img{
  max-height: 200px;
}
</style>
</head>
<body>

<input type='file' />
<div>
  <img id="myImg" src="#" alt="your image" />
</div>


<script type="text/javascript">

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
    $('#myImg').resizable();
    $('#myImg').draggable();
};
</script>
</body>
</html>