Flex: Retain original image size while rendering it in TileList

Question

Uploading multiple images in a tileList using a custom renderer. But when each uploaded image is set to TileList, it loses its original size.
How can I retain the original image while rendering it on TileList?

<mx:TileList  paddingTop="3" id="listView" contentBackgroundAlpha="0"
                contentBackgroundColor="0XFF00FF" horizontalCenter="true"
                     width="500" height="450"
                     itemRenderer="ImageRandeer"
                     dataProvider="{imageCollection}"
                     allowMultipleSelection="true"
                     >
        </mx:TileList>

Item Renderer

<mx:Box xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="3"
                >

    <mx:Image source="{data.image}" height="150" width="150" />

</mx:Box>

On Load

private function selectHandler(event:Event):void
{       
    event.currentTarget.fileList as ArrayList;
    var file:FileReference;
    for(var i:Number = 0; i < fileRef.fileList.length; i++) {
        file = fileRef.fileList[i];
        file.addEventListener(Event.COMPLETE,onLoaded);
        file.load();
    }
}

private function onLoaded( event : Event) : void
{
    var obj:Object = new Object();
    obj.name = event.currentTarget.name;
    obj.image = event.currentTarget.data;
    imageCollection.addItem(obj);

}