Image Scaling Bug?

Question

I've been working with flex for a few weeks now, and I've
come across this odd behavior in the Image class. The livedocs
state that the default value for the scaleContent property of an
Image object is 'true'. This is the case, and when setting the
width or height of my image it scales correctly. The problem is
that the container that holds the object only scales with the
explicitly set value and leaves the other as its original size.
The following code is a small testcase to show the behavior
in action.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Style>
.test {
cornerRadius: 0;
headerHeight: 0;
borderThickness: 1;
dropShadowEnabled: false;
borderStyle: solid;
backgroundColor: #333333;
borderColor: #ff0000;
titleStyleName: "myTitleStyle";
</mx:Style>
<mx:Box styleName="test">
<mx:Image source="glassdoor.jpg" height="32"/>
</mx:Box>
</mx:Application>
You'll have to replace the image name with one that you
provide, and set the height to something smaller that the image's
height to see the effect. The box's red border shows that it
realizes the image is 32 pixels in height, but doesn't seem to know
what to do with the implicitly scaled width. Any ideas? Am I doing
something wrong, or is this a bug? Since the box normally conforms
to the size of the object inside it, I would have expected it to
shrink on both parameters to continue hugging the outside of my
newly-scaled image.

Answer 1

The problem is that when the Box asks the Image for its size
it can only report the explicity set height. When the Image tag
loads its source it scales it to make the size you set (32 high)
but doesn't change its width - it is the Image and not the Box that
is causing what you see. The Image won't shrink to fit the image
loaded. Try adding horizontalAlign="center" to the Image and see if
the loaded source floats in the middle.
Using horizontalAlign and verticalAlign on the Image tag
aligns the actual image within the Image tag space. For example, if
you have <mx:Image width="100" height="100"
horizontalAlign="center" verticalAlign="middle" /> and you load
in a 300x600 image, the image will be scaled to 50x100 and be
centered within the 100x100 area of the Image tag.
In general, if you cannot give an explicit size, give a
minWidth or minHeight, so the measurement phase of the Flex
component layout cycle has something to work with.