Demo of Resizable with aspectRatio using JQuery UI

Both length and width we can change by setting the aspectRation option to true. We can set the value of aspectRatio to any number and maintain that ratio between height and width.

Tutorial Resizable

Full Code

<script>
$(document).ready(function() {
/////
$( "#resize_id" ).resizable({
aspectRatio: true
});
/////
})
</script>

HTML

<div id="resize_id" class=resize_cl></div>

Style

<style>
.resize_cl{ 

padding:5px;
width:100px;
height: 80px;
background-color: #ffff00;
border: 1px solid red;
}</style>