[flexcoders] How to remove the scaled images gap

[Cornelius Schmale]

Hi everybody,

view this little application, which displays 4 images in 2 cols and 2 rows. 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
                                layout="vertical"
                                xmlns:local="*"
        
applicationComplete="onApplicationComplete()">
        <mx:Script>
                <![CDATA[
                        // creating an image, ignore that ... 
                        private function onApplicationComplete():void
                        {
                                var bitmapData:BitmapData=new
BitmapData(400, 200, false, 0x000000);
                                bitmapData.perlinNoise(400, 200, 4, 12345,
false, false, 7, false);
                                var bitmap1:Bitmap=new Bitmap(bitmapData);
                                var bitmap2:Bitmap=new Bitmap(bitmapData);
                                var bitmap3:Bitmap=new Bitmap(bitmapData);
                                var bitmap4:Bitmap=new Bitmap(bitmapData);
                                img1.source=bitmap1;
                                img2.source=bitmap2;
                                img3.source=bitmap3;
                                img4.source=bitmap4;
                        }
                ]]>
        </mx:Script>

        <mx:VBox height="90%" width="90%">
                <mx:HBox height="50%" width="100%" borderStyle="solid"
borderColor="0xFF0000">
                        <mx:Image verticalAlign="middle"
horizontalAlign="left" height="100%" width="100%" id="img1"/>
                        <mx:Image verticalAlign="middle"
horizontalAlign="left" height="100%" width="100%" id="img2"/>
                </mx:HBox>
                <mx:HBox height="50%" width="100%" borderStyle="solid"
borderColor="0x0000FF">
                        <mx:Image verticalAlign="middle"
horizontalAlign="left" height="100%" width="100%" id="img3"/>
                        <mx:Image verticalAlign="middle"
horizontalAlign="left" height="100%" width="100%" id="img4"/>
                </mx:HBox>
        </mx:VBox>

</mx:Application>

These images are scalable, but they keep their aspect ratio. Now have a look
at these two screens, which are made at different browserwindow-sizes:
http://www.abload.de/image.php?img=gap34tu.png

How can this gap inside the boxes be eliminated, so that the images flow
together at any scaling?

Thanks a lot