Flex: Different FillMode of the Spark Image Component

The Flex Spark Image component has this interesting property known as 'FillMode' and this should give you a rough idea what each individual type of 'FillMOde' represents.

Source Code for the main application - 'SimpleImageFillMode.mxml'

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="100%"
      height="100%"
      backgroundColor="#CDCDCD">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   [Embed(source="assets/avatar.png")]
   [Bindable]
   public var imgClass:Class;
  ]]>
 </fx:Script>
 <s:VGroup width="100%"
     height="100%" 
     horizontalAlign="center" 
     verticalAlign="middle">
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Original Image"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="450">
    <s:Image source="{imgClass}" 
       width="100" 
       height="100"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup width="150"/>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Fill Mode: clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Fill Mode: repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Fill Mode: scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (80 * 80)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="80"
       height="80"
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="80"
       height="80"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="80"
       height="80"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (100 * 150)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="100"
       height="150"
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="100"
       height="150"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="100"
       height="150"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (150 * 100)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="100"
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="100"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="100"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
  <s:HGroup horizontalAlign="center" 
      verticalAlign="middle">
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Label text="Size (150 * 150)"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="150" 
       fillMode="clip"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="150"
       fillMode="repeat"/>
   </s:HGroup>
   <s:HGroup horizontalAlign="center" 
       verticalAlign="middle"
       width="150">
    <s:Image source="{imgClass}"
       width="150"
       height="150"
       fillMode="scale"/>
   </s:HGroup>
  </s:HGroup>
 </s:VGroup>
</s:Application>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.