Intelligent Scaling

How to scale a design for any screen size and aspect ratio

By default content is stretched to fit the screen, which can cause the features to distort. This is typically not a problem with solid color and gradient backgrounds and simple shapes, but can make logos, text and pictures look weird. You can fix this by setting the property Scale Mode to one of the values:

  • Fit: minimum of horizontal and vertical scales to make sure no content is lost
  • Fill: maximum of horizontal and vertical scales to make sure all of area is covered
  • Average: average of fit and fill
Right answer depends on context and the easiest thing is try out different options. In the example below you can see how both the icon scales in the different modes when screen aspect ratio increases/decreases.

tutorials