Open menu

Aspect Ratio Calculator

Work out any aspect ratio from a width and height, simplified to whole numbers such as 16:9, or pick a common ratio for video, social media, photos and print. Enter the width or height you need and get the other side instantly. Export modern CSS aspect-ratio with a padding fallback for very old browsers, a Tailwind class, or image markup with width and height attributes, which stop the page jumping while images load.

Preset gallery
16:9
640 × 360

Accessibility checks

  • Pass aspect-ratio (and width/height attributes on images) reserve space before media loads, preventing layout shift.
  • Pass The calculated size is 640 × 360, in whole pixels.

Export code

.media {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover; /* for images and videos */
}

/* Legacy fallback (only needed for very old browsers) */
@supports not (aspect-ratio: 1) {
  .media-wrap {
    position: relative;
    padding-top: 56.25%;
  }
  .media-wrap > .media {
    position: absolute;
    inset: 0;
    height: 100%;
  }
}
Favourites on this device (0)

No favourites yet.

Ratio
Calculate a size
Known side

How to use the aspect ratio calculator

  1. Enter a width and height, or pick a common ratio from the list.
  2. See the simplified ratio in the preview box, which takes that shape.
  3. Choose the known side (width or height) and type the size you need.
  4. Read the other side in the preview and the checks.
  5. Export CSS, Tailwind or an image tag with width and height attributes.

Common ratios

  • 16:9: HD and 4K video, YouTube, most screens.
  • 9:16: vertical video for Stories, Reels and Shorts.
  • 4:3: classic photos and older displays; many phone camera photos.
  • 3:2: DSLR and mirrorless camera photos.
  • 1:1: square social posts and avatars.
  • 4:5: portrait social posts.
  • 1.91:1: link preview (Open Graph) images, 1200 × 630.
  • √2 (1:1.414): A-series paper such as A4.

How it works

An aspect ratio is width divided by height, written in its simplest whole-number form. The calculator divides both sides by their greatest common divisor, so 1920 × 1080 becomes 16:9. To find a missing side it uses the same proportion: height = width × (ratio height ÷ ratio width). The CSS output uses the aspect-ratio property, which reserves the right amount of space before an image or video loads, so the layout doesn’t jump.

Worked examples

Example 1: a responsive video embed

Load HD video. Apply aspect-ratio: 16 / 9; width: 100% to the iframe. It scales with its container and never letterboxes or jumps.

Example 2: an Open Graph image

Load Open Graph image (1200 × 630, 40:21). Use it to size social share images so they aren’t cropped in link previews.

Example 3: a product grid

Set the ratio to 4:5 and apply it to every product image with object-fit: cover. Photos of different shapes are cropped consistently, and the grid lines up.

Common mistakes

  • Fixing both width and height in CSS. Images stretch; set one and let aspect-ratio or height: auto do the rest.
  • Forgetting object-fit. Without object-fit: cover, images squash to fit the box.
  • Rounding to odd pixels for video. Many encoders need even dimensions.

Accessibility and performance notes

Reserving space is one of the simplest ways to improve Core Web Vitals. When every image, video and embed has a known shape before it loads, nothing below it moves, so readers don’t lose their place and don’t tap the wrong link by accident. That matters most on slow mobile connections, where images can arrive seconds after the text.

Remember that a fixed ratio can crop important content. If a photo has text or faces near its edges, check it at the chosen ratio or use object-position to keep the subject in view. For charts and diagrams, prefer the image’s natural ratio so nothing is cut off, and always give meaningful images an alt description.

Frequently asked questions

How do I calculate an aspect ratio?

Divide the width and height by their greatest common divisor. 1920 × 1080 share a divisor of 120, giving 16:9. The calculator does this for you, including decimal sizes such as 8.5 × 11 inches (17:22).

How do I find the height for a given width?

height = width × (ratio height ÷ ratio width). For 16:9 at 640px wide, that's 640 × 9 ÷ 16 = 360px. Choose which side you know and type its size.

Why add width and height attributes to images?

Browsers use them to reserve the right amount of space before the image downloads, so content below doesn't jump when it appears. Combined with CSS width: 100% and height: auto, images stay responsive. This prevents cumulative layout shift (CLS).

Do I still need the padding-top hack?

Not for current browsers: aspect-ratio is supported everywhere modern. The export includes the old padding-top method only inside @supports not (aspect-ratio: 1), for very old browsers.

Which aspect ratios are most common?

16:9 for video and most screens, 4:3 for older displays and many tablets, 1:1 for social posts and avatars, 3:2 for photos from many cameras, and 9:16 for vertical video and stories.

Sources