jQuery-UI resizable, resizing child elements

Question

I have div elements, containing images. I want to make the div resizeable using jQuery-UI, resizing both the div and the children image elements.

I have tried using alsoResize, like below, but it seems to resize the first divs image instead of the corresponding child image.

$('div').resizable({
    alsoResize: $(this).find('img'),
    aspectRatio: true,
    maxHeight: 140
});

I have created a fiddle to demonstrate this http://jsfiddle.net/letsgojuno/EhyGy/

It seems this context is always the first div, instead of the currently being resized div.

Answer 1

Since $(this) in alsoResize will get first div, every time you make resize event, it will resize only first image. You will have to create resizable for each element, like this:

$('div').each(function () {
    $(this).resizable({
        alsoResize: $(this).find('img'),
        aspectRatio: true,
        maxHeight: 140
    });

});