Thanks for the insight. I did something very similar, although I'm using HBox/VBox components to layout my app so I had to put a VBox wrapper around the image like this:
<mx:VBox id="image_01_wrapper" width="100" height="100%" verticalAlign="middle" horizontalAlign="center"> <mx:Image id="image_01" source="{'http://media.basspro.com/'+current_product.image_url_01}" complete="{image_resize(image_01,100,75)}" alpha="0"/> </mx:VBox> Then my image_resize() function takes an Image object and desired width/height as parameters: private function image_resize (img:Image,w:int,h:int):void { var img_width:int = img.content.loaderInfo.width; var img_height:int = img.content.loaderInfo.height; if (img_width/img_height >= w/h) { //image is wider than box proportions - resize based on width img.width = w; img.height = w/img_width*img_height; } else { //image is taller than box proportions - resize based on height img.height = h; img.width = h/img_height*img_width; } //Alert.show(img.width.toString() + "x" + img.height.toString()); var fade_in:Fade = new Fade(); fade_in.target = img; fade_in.alphaFrom = 0; fade_in.alphaTo = 1; fade_in.play(); } I also added the fade in tween so that the images gradually fade in when they have been resized. Anyway, your code below got me going. Thanks! -Dan --- In flexcoders@yahoogroups.com, Fotis Chatzinikos <fotis.chatzini...@...> wrote: > > For something similar i do the following, you should be able to change it to > do what you want quite easily..: > > <mx:Image > id="selectedProductImageID" > verticalCenter="0" > complete="imageLoaded()" > source="{selectedPhoto}" > left="5" > /> > > Now the important bit is the "complete="imageLoaded()": > > and the imageLoaded function: > > private function imageLoaded():void > { > if (selectedProductImageID.content.loaderInfo.width >= > selectedProductImageID.content.loaderInfo.height) > { > selectedProductImageID.width = 330; > selectedProductImageID.height = > 330*selectedProductImageID.content.loaderInfo.height/selectedProductIm ageID.content.loaderInfo.width > ; > } > else > { > selectedProductImageID.height = 330 ; > selectedProductImageID.width = > 330*selectedProductImageID.content.loaderInfo.width/selectedProductIma geID.content.loaderInfo.height; > } > } > > On Mon, Feb 23, 2009 at 9:36 PM, byte.sensei <byte.sen...@...> wrote: > > > I have an app that loads several images into mx:Image tags with > > scaleContent=true and width=160 / height=120. The problem is not all of > > my images have these proportions, and for odd sized images they end up > > being loaded into the upper left hand corner instead of centered in the > > restricting image box. > > > > All I'm trying to do is have a box 160x120 pixels, then load in images > > of various sizes dynamically and have them 1) scale to fit within this > > box, and 2) render centered vertically/horizontally in this box. Is > > there any way I can do this not knowing the actual image sizes (and > > using images of different proportions)? > > > > Thanks! > > > > > > > > > > -- > Fotis Chatzinikos, Ph.D. > Founder, > Phinnovation > fotis.chatzini...@..., >