Maintain Image Aspect Ratio Programmatically
The aspect ratio of an image is the ratio of its width to height, and all images have an inherent aspect ratio. By default, the <mx:Image> tag property maintainAspectRatio is set to true. This setting preserves the aspect ratio so that an image does not appear distorted.
<mx:Image maintainAspectRatio=”true” />
So, if an <mx:Image> tag has defined an explicit width and/or height, the control will preserve the aspect ratio accordingly.
ie. <mx:Image width=”100″ height=”100″ />
However, there is a catch to the maintainAspectRatio property. Documented in the Adobe Livedocs, it states that when maintaining aspect ratio, there is a possibility there there will be “empty” pixels. For example, if an image is 100×100 pixels, and the <mx:Image> tag is defined as:
<mx:Image source=”example.jpg” height=”150″ width=”200″ />
Then Flex sizes the image to 150 by 150 pxiels, the largest posible image that maintains the aspect ratio and conforms to the size constraints. The other 50 by 150 pixels remain empty. However, the <mx:Image> tag reserves the empty pixels and makes them unavailable to other controls and layout elements.
This can be an issue when when the <mx:Image> tag is wrapped in a defined “center” horizontal-aligned, “middle” vertically-aligned container, and the images can be of varying dimensions. In the example below, the original image is 380×169 pixels:
<mx:Box width=”400″ height=”400″ backgroundColor=”#FFFFFF” horizontalAlign=”center” verticalAlign=”middle”>
<mx:Image source=”example1.jpg” height=”25″ maintainAspectRatio=”true” />
</mx:Box>
Here, the <mx:Image> tag preserves the aspect ratio where the height is 25 pixels. However, the image is now not centered horizontally and vertically.
Image using the maintainAspectRatio
To go about this, one solution is to not rely on the <mx:Image> tag maintainAspectRatio property, and to programmatically determined the explicit width and height.
<mx:Box width=”400″ height=”400″ backgroundColor=”#FFFFFF” horizontalAlign=”center” verticalAlign=”middle”>
<mx:Image source=”example1.jpg” height=”25″ maintainAspectRatio=”false” complete=”handleComplete(event)” />
</mx:Box>
Here, set the maintainAspectRatio to false so the <mx:Image> tag will not be handling the aspect ratio maintenance. Add a complete event handler so that when the image is loaded, we can calculate the aspect ratio:
private function handleComplete(event:Event):void
{
var target:Image = event.target as Image;
// Formula: The product of ratio and a known dimension.
target.width = (target.contentWidth * target.height) / target.contentHeight;
}
The width is defined as the product of the ratio and the known height. And as you can see, the image preserved its aspect ratio and is horizontally and vertically centered.
Image’s dimensions determined programmatically
This is a simple example. There may be occasions where an <mx:Image> tag has both a defined explicit width and height. If that is the case, then we will need to add logic inside the complete event handler to determine what the explicit width and height is suppose to be in order to maintain aspect ratio.
Happy coding!
