Flex: Scale an Image so that its width matches contentWidth?

Question

I have a dynamic layout, where an image is loaded into an HBox:

<mx:HBox ...>
    <mx:Image height="100%" .../>
</mx:HBox>

only the image's height is set on the image, so that it can take all the vertical space available, while its width is left undefined and I expect the width to scale accordingly with its height.

It turns out that the image's height is equal to its contentHeight, i.e. height scales properly; however, the image's width is still the same as measuredWidth (the image's original width), and is not scaled accordingly.

For example, if the image's original size is 800x600 and if the HBox is 300 in height, then image height will scale down to 300, however its width doesn't scale down to 400, instead it stays at 800.

I tried to add an event listener to explicitly set the image width:

<mx:Image id="img" height="100%" updateComplete="img.width=img.contentWidth;" .../>

It works only the first time the image is loaded, after that, if I use Image.load() to dynamically load different images, it stops working - the image width is set to 0.

Any help/advice will be highly appreciated.

Answer 1

Try to use <mx:Box /> or <mx:Canvas /> not <mx:HBox />.

As I understand, HBox has flexible width. It calculates width later as a sum of it children. The same with height in VBox.

Answer 2

try adding: maintainAspectRatio="true"

---

Update 1: In reply to your comment, this Is what you are looking for, as you can see in the example here. Maintaining the aspect ratio implies keeping the relation between width & height.

Answer 3

Got the answer on Adobe forum. My solution was almost there, just need to use callLater(), like:

private function scaleImage():void {
    img.width = img.contentWidth;
}

updateComplete="callLater(scaleImage)"