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.