jQuery gets its values from the browsers DOM engine, which always return normalized values in pixels no matter how they were intially set.

So the only way you will be able to do this is by recalculating the percentages based on elements width/height and parents width/height once the resizing has stopped.

$(.image).resizable({

    autoHide: true,

    stop: function(e, ui) {

        var parent = ui.element.parent();

        ui.element.css({

            width: ui.element.width()/parent.width()*100+%,

            height: ui.element.height()/parent.height()*100+%

        });

    }

});

See the above in action on jsFiddle

Notice how I'm setting the width/height with .css instead of using .width and .height. This is because the latter will be normalized by the DOM engine and turned into pixels.

Now to some feedback on your code. It's quite a mess to be honest. It's a really bad practice to use inline styling and scripts. Set the width/height of #parentDiv with css just as you did with .image. And don't use onmouseover attribute. Instead bind the event with jQuery using .bind.

Also you shouldn't make the elements resizable on mouse over. It should be done once, when the document is ready. Use the autoHide option to hide the handlers while the mouse isn't over the element. An alternative is to bind enable and disable methods to mouse hover, but that will not have the same result.