Question

I need to display an image in a resizable dialog (so far all the specific image popup libraries I have tried do not fit my needs).

All I want to do is maintain the aspect ratio during resizing. Sounds easy, but it’s not.

I thought something like this might work, but no dice:

var d = $("").dialog({title:title, width:400, height:400});
d.resizable( "option", "aspectRatio", true );

Any pointers greatly appreciated, tks

Answer 1

Due to the way it’s hooked in, I find it easiest to just do the resizable portion yourself, like this:

$("div").dialog({
    title:"Title", 
    width:400, 
    height:400, 
    resizable: false
}).parent().resizable({ 
    handles: 'n,e,s,w,se,sw,ne,nw', 
    aspectRatio: true 
});​​​

You can view a demo here, you can also destroy and re-create it…but that’s a bit wasteful, so just create it above, specify the max/min height/width in the resizable instead of the dialog if needed. This should work: .parent().resizable("option", "aspectRatio", true), but it doesn’t due to the way the widgets hooked in, so the eaiest solution is to just create the resizable yourself with the options you want when you create the dialog.

Side note: you’re using .parent() here because you wan the dialog container that contains the title bar and your content. It’s created/wrapped like this when you create the dialog.