jquery ui - issue with resizable image within a div - jquery-ui

Question

When resizing an image from left (using "n","w","ne","sw" or "nw" handles),
the parent's left and top positions are not affected, leading to a faulty behavior which can be seen in the following demo: http://jsfiddle.net/8VY52/1704/.
<div id="draggableHelper">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
$('#draggableHelper').draggable();
$('#image').resizable({
handles: "n, e, s, w, ne, se, sw, nw"
});
#draggableHelper{
border: 5px solid black
}
img{
border: 5px solid red;
}

Answer 1

You may want to consider something like this:
http://jsfiddle.net/Twisty/hukpwa3n/
HTML
<div id="draggableHelper" style="display: inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
CSS
#draggableHelper {
border: 5px solid black;
padding: 5px;
padding-bottom: 1px;
background: red;
}
img {
width: 100%;
height: 100%;
margin: 0;
}
.ui-resizable-handle {
border: 1px solid #000;
background: #fff;
width: 10px;
height: 10px;
}
.ui-resizable-se {
right: -5px;
bottom: -5px;
}
.ui-resizable-nw,
.ui-resizable-sw {
margin-left: -1px;
}
.ui-resizable-nw,
.ui-resizable-ne {
margin-top: -1px;
}
.ui-resizable-ne,
.ui-resizable-se {
margin-right: -1px;
}
.ui-resizable-sw,
.ui-resizable-se {
margin-bottom: -1px;
}
JavaScript
$(function() {
$('#draggableHelper').draggable().resizable({
handles: "ne, se, sw, nw"
});
});
This allows the <img> to be 100% the size of it's parent and then you can resize the parent. Hope that helps.