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.