jQuery UI Resize Aspectratio
Try to drag squre border to resize.
Source Code
Expand
ExampleJquery ui resize aspectratio
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script> <!-- CSS --> <style type="text/css"> .square { width: 100px; height: 100px; border: 1px solid black; text-align: center; float: left; background-color: lightblue; cursor: pointer; } </style> <!-- Javascript --> <script> $(function () { $(".square").resizable({ aspectRatio: 16 / 9 }); }); </script> <!-- HTML --> <div class="square">Ratio - 16 : 9</div>