Question

I am working in javaScript an jquery-ui an want to ask a question about resizing.Is it possible to resize only diagonally i.e Suppose I have a rectangle having width 200 and height 100 and I want to resize it by grabbing it one corner only in such a way that both height and width will increase together keeping the width/height ratio same and I am not allowed to increase only height or only width.

I have tried it using the handle option of resizable

$("#resizable").resizable({
    handles: 'se'
});​

JSFiddle example is here Resizing only diagonally
But still I am able to increase only height or only width changing my width/height ratio.
I am sorry if I am not clear.

Thanks Any help will be appreciated.

Answer 1

user like

    <script>
    $(function() {
        $( "#resizable" ).resizable({
            aspectRatio: 16 / 9 //(in your case it should be 2/1)
        });
    });
    </script>

http://jqueryui.com/demos/resizable/aspect-ratio.html

updated demo

http://jsfiddle.net/bx2mk/765/