I suspect I can guess the answer but looking for the definitive 
resolution on a 9-Slice question.

I have an image that is 960(x) by 113(y) and I want it to dynamically 
stretch across the screen as a header/title banner but keep the same 
height.  

Say for example my screen is 1200 wide.  I would like the image to 
stretch to 1200 x 113.  I have divided the image up using 9-Slice as:
[Embed(
 source="images/header.png", 
 scaleGridTop="70", scaleGridBottom="86", 
 scaleGridLeft="199", scaleGridRight="900"
)]

[Bindable]
public var FancyBorderImage:Class;

For the sake of an example, I am using the following to display the 
image:
<mx:Panel x="0" y="0" width="100%" height="600" layout="absolute">
  <mx:Image source="{FancyBorderImage}" x="0" y="0"  height="113" />
  <mx:Image source="{FancyBorderImage}" x="0" y="200" width="100%"   
height="113" />
  <mx:Image source="{FancyBorderImage}" x="0" y="400" width="1200"  
height="200"  />
</mx:Panel>

Here is the issue - the image will not scale horizontally with the 
original height of 113.  
It only scales horizontally beyond the original 960 width in the 3rd 
case when I increase the height.  
I was hoping the 2nd example would be the working one under 9-slice.

Ideas?

Geoff.

Reply via email to