JQuery UI - Pixel to Percentage while Resizing

I am working on code where I want to zoom my div-slides , I am able to do this because i am using "percentage" in width , height , font etc style attributes.
But if I try to resize the element using JQuery UI resizable class then it disturb the "percentage" and put pixel over it.
Same thing occur with draggble and other which put final output in "pixel" format.

I would be better if you make all UI component as percentage format.

however I got the workaround to the problem,,
one can add these stop function like

$("#div_box_id_").resizable({
handles: "all",
stop: function (){
var w = ( 100 * parseFloat($(this).css("width")) / parseFloat($(this).parent().css("width")) )+ "%" ;
var h = ( 100 * parseFloat($(this).css("height")) / parseFloat($(this).parent().css("height")) )+ "%" ;
$(this).css("width" , w);
$(this).css("height" , h);
},
dragHandle: true
});

$("#div_box_id_" + self.div_box_number).draggable({
opacity: 0.70,
stop: function (){
var l = ( 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) )+ "%" ;
var t = ( 100 * parseFloat($(this).css("top")) / parseFloat($(this).parent().css("height")) )+ "%" ;
$(this).css("left" , l);
$(this).css("top" , t);
}
});