Response title
This is preview!
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)
in Using jQuery UI
•
7 years ago
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>
1