Overview

This article serves as a reference on Aspect Ratio, Aspect Fill, and its effect on the appearance of your app

Information

What is Aspect Ratio and Aspect Fill? 

Aspect Ratio

• The ratio of the width to the height of an image or screen. For example, we are now using a 16:9 aspect ratio for Mobile and a 4:3 for Tablet.
• Anything using this ratio will look great on the platform. Our recommended background sizing already uses a 16:9 and 4:3 aspect ratio (e.g. 640x1136: 640/9=71; 1136/16=71), so as long as your background images are using the recommended sizing, they should not be affected.
• We recommend using 750x1334 for Mobile, and 1536x2048 for Tablet for optimal loading times, but this sizing is not required as long as it’s using the correct aspect ratio.

Aspect Fill

• Aspect Fill sizes your image to fit proportionally until the whole image window is filled. This is why you see the clipping of your image.
• It is essentially zooming in on part of the image so the whole space is filled proportionally and there is no blank space showing around the edges.
• If the image is not the correct aspect ratio (16:9 or 4:3) it will clip off parts of the image regardless of how large or small the image is.

Why is the Aspect Fill integrated into the platform? 

• Since the iPhone 5, all iOS devices use the same aspect ratio of 16:9 and 4:3.
• Most modern Android devices use this aspect ratio as well. This is why we decided to do away with Scale to Fit images, which often look skewed and stretched in visually unappealing ways, and have opted for Aspect Fill.
  
• Since almost all devices running our apps use this ratio, it makes sense to use images that also use this ratio and use Aspect Fill to make sure images are not distorted.