keep aspect ratio of .ui-dialog-content when resizing

Question

I have an image within the dialog. when I resize the dialog, the aspectRation is working on the complete dialog, not only on the image, when I resize it.

$("#videoDialog").dialog({
            resizable: false,
            autoOpen: true,
            width: 300
        }).parent().resizable({
            aspectRatio: true,
            minWidth: 300
        });

The more I resize the dialog, the more space I get between the bottom of the image and the bottom of the dialog.

Here is a fiddle: https://jsfiddle.net/0fnbnw4L/1/

Any ideas how to fix that?

thanks Adrian

Answer 1

That's because you are resizing (and keeping the aspect ratio of) the entire dialog.

If you remove that .parent() call, you resize only the contents of the dialog window. But then, the dialog window don't resize with the contents, right? So you have to reset its size everytime you resize the contents.

Here is the final code:

$(document).ready(function(e) {
    $("#slideDialog").dialog({
        resizable: false,
        autoOpen: true,
        width: 100
    }).resizable({
        aspectRatio: true,
        minWidth: 100,
        resize: function (evt, ui) {
            ui.element.parent().css({width:'',height:''});
        }
    });
});

And the working example: https://jsfiddle.net/0fnbnw4L/4/