Aspect Ratios Explained: 16:9, 4:5, 9:16 and How to Resize Without Distortion

An aspect ratio describes the shape of an image, video or screen, not its size. A small thumbnail and a huge monitor can share the same 16:9 shape. Keeping the ratio when you resize is what stops things looking stretched.

Finding the ratio

Divide the width and height by the largest number that divides both exactly, their greatest common divisor.

Resizing without distortion

To find the new height for a new width, multiply the new width by the original height and divide by the original width. A 1920 × 1080 image resized to 1280 wide should be 720 high.

• Portrait social post, 1080 × 1350: that is 4:5. At 1200 wide it should be 1500 high.
• Vertical phone video, 1080 × 1920: that is 9:16. At 720 wide it should be 1280 high.

Common ratios

• 16:9 for most video, TVs and monitors.
• 9:16 for vertical video on phones.
• 4:5 and 1:1 for portrait and square social posts.
• 4:3 for older screens and many tablets.
• 3:2 for many camera sensors and printed photos.

Some screen sizes do not reduce to a neat ratio. The common laptop resolution 1366 × 768 works out to 683:384. It is close to 16:9, but not exact, which is why video on those screens can show thin black bars.

In CSS

The aspect-ratio property keeps an element in shape as its width changes. Writing aspect-ratio: 16 / 9 on a video container is enough to stop layout jumps while the video loads.

Cropping vs letterboxing

When media does not match the space it has to fill, there are two options. Cropping cuts off the edges so the image fills the frame, which works for photos but can cut off important content. Letterboxing keeps the whole image and adds bars, black or blurred, to fill the gaps. In CSS these match object-fit: cover and object-fit: contain.

The safest approach for content that will appear in many places, such as a product photo or a video thumbnail, is to keep the important subject near the centre, so it survives cropping to 16:9, 1:1 or 4:5.

Tip: When the new height comes out as a decimal, pick a width that is a multiple of the ratio's first number, such as a multiple of 16 for 16:9, to get whole pixels.