Image width bug?

Question

http://pyroblue.dyndns.org:8080/flexapps/BhgPhotoContest/bin/BhgPhotoContest.html
if you view that page, you can see there is a lot of
whitespace underneath the image...im just setting the image width
(similar to what you do with HTML)...but for some reason, Flex puts
a bunch of whitespace (the original height's worth) at the bottom
of the image....
my mxml file looks like this:
<mx:HTTPService id="contestListing" url="photocontest.xml"
result="pcDataHandler(event)" fault="faultHandler(event)"/>
−
<mx:Repeater dataProvider="{photoContests}"
id="pcRepeater">
−
<mx:VBox>
<mx:Label
text="{photoContests.getItemAt(pcRepeater.currentIndex).pcName}"
fontSize="14" fontWeight="bold"/>
−
<mx:HBox>
<mx:Image
source="{photoContests.getItemAt(pcRepeater.currentIndex).prevPhoto}"
maxWidth="75" maintainAspectRatio="true"/>
<mx:Text
text="{photoContests.getItemAt(pcRepeater.currentIndex).desc}"
width="400" fontSize="10"/>
</mx:HBox>
</mx:VBox>
</mx:Repeater>
</mx:VBox>
any ideas?

Answer 1

Let's say your image is 300x300 pixels. You want to place it
into an area that is 100x200 and an area that's 500x200, centered
in both:
<mx:Image id="img1"
width="100" height="200" source="{imagefile}"
scaleContent="true" maintainAspectRatio="true"
horizontalAlign="center" verticalAlign="middle" />
<mx:Image id="img2"
width="500" height="200" source="{imagefile}"
scaleContent="true" maintainAspectRatio="true"
horizontalAlign="center" verticalAlign="middle" />
For img1, the smallest dimension is 100 (width) which it
matches to the real image's maximum dimension which is 300. That
means img1 will display an image 100x100 centered vertically with
50 pixels above and below.
For img2, the smallest dimension is 200 (height) which it
matches to the real image's maxium dimension which is 300. That
means img2 will display an image 200x200 centered horizontally with
150 pixels to the left and right.
The Image tag has 2 dimensions: img.width and img.height is
the area it occupies on the display. img.contentWidth and
img.contentHeight is area the pixels occupy. For img1, contentWidth
and contentHeight are 100, for example.