[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>
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>
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