[flexcoders] Image control reports wrong size

[jaywood58]

My app needs to display an image inside a VBox, with content auto-scaled to fit 
the width of its container, and the VBox height adjusted to accommodate its 
children.
 
The problem arises when the loaded image has content width > VBox width, i.e., 
when the image content is scaled to fit --VBox appears to be using he original, 
unscaled height of the image, rather than its scaled-down height, so I end up 
with extra whitespace below the image. 

Similar behavior when I put the image in a Canvas, so it's not the container, 
but the image that is reporting incorrect height after scaling. I've posted an 
example to demonstrate the issue, at: http://data.uniontrib.com/ScaleTest/  
(view source enabled). 

I came up with an unsightly work-around that computes the "proper height" of 
the image once it has loaded and scaled, and assigns this to a bindable var 
that sets the height of the image... e.g.:

     <mx:VBox id="myVb" width="100">
          <mx:Image id="myImg" scaleContent="true" source="fx.jpg"
               width="100%" height="{properHeight}"
               complete="computeProperHeight()"/>
     </mx:VBox>

     ...

      [Bindable] private var properHeight:Number;

      // run on complete of image load
     private function computeProperHeight():void
     {
          properHeight = (myImg.width/myImg.contentWidth)*myImg.contentHeight;
     }

If anybody has a better idea, I'd love to hear it.