Aspect Ratios

Aspect Ratios #

What is an Aspect Ratio? #

Aspect ratios are proportional relationships of the length and width of an image or video. It is expressed as a number compared to another number (a:b).

They can also be written as a decimal number (1.78), which is just the two ratio divided. If one side is length 1, or a, the other side is length b, or the ratio.

What are they used for? #

Aspect ratios are used to determine the proper proportions of media, without setting a fixed length or width. A movie on television can be scaled down to be watched on your phone, without distortion: without stretching or shrinking one side of the media.

What do they look like? #

Most videos watched from your phone, TV, or computer are in 16:9 ratio. If you record a video on your phone horizontally, or landscape, it be 16:9 or 4:3, but if you record it vertically, or portrait, the aspect ratio becomes 9:16 or 3:4. A square Instagram post would be a 1:1 ratio. No matter how big you look at this photo, it will still be a square.

What does it mean? #

Essentially, it is a fraction that the length and width can be divided to show. For example, a normal 16:9 display is 1920px by 1080px. 1920 divided by 1080 is or 1.78. 16 divided by 9 is 1.78 as well. This shows that it is in a 16:9 aspect ratio and that its proportions are the same.

The crop tool in any photo editing software demonstrates aspect ratios neatly. The crop tool is set to a 4:3 aspect ratio, while the image is in a “3:2”, or “vertical 2:3” ratio.

Cropping an image

Letterboxing #

When you try to view content that was created at one aspect ratio (like 4:3), on a display that has a different aspect ratio (like 16:9), there is going to be a problem. There are a number of different solutions to this. The most common is letterboxing - you show the content as large as you can in it’s entirely, centered in the display, and then fill the remaining bars with a solid black color. This is called letterboxing.

Depending on who you ask, the top/bottom bars are letterbox bars, and left/right bars is called pillowboxing. The term letterboxing is colloquially used to refer to both.

Other Ways to put Content on a Mismatched Display #

In Windows, you can choose an image as your desktop background. Windows needs to determine how to display content of different aspect ratio than your display. Windows 11 gives you the following list of options:

Fill Options in Windows 11 Personalization menu

The options are Fill, Stretch, Tile, Center, and Span. Digital digital media applications may call these techniques differently, but there are only so many approaches you can take.

Fill Will scale up the image until it fits the display completely, not showing you the entirety of the image.
Stretch will stretch the image to fit the display.
Tile will repeat the image again. Also called ‘repeat’. You also might only repeat horizontally or repeat vertically, common approaches when working with UV maps and 3D software. Center will letterbox the image.
Span is used for multiple monitors, filling the image across all connected displays.