Aspect ratio calculator

How to use this tool

When a browser meets an image without knowing its dimensions, it renders the page as though the image takes no space — then reflows everything the moment it arrives. That jump is Cumulative Layout Shift, one of Google's Core Web Vitals, and it's the reason you sometimes tap the wrong thing on a page that's still loading.

The fix costs nothing. Give every <img> its width and height attributes and modern browsers compute the ratio and reserve the space before the file downloads. Those attributes don't lock the display size — CSS still controls that — they simply tell the browser the shape in advance. A good CLS score is 0.1 or below; anything over 0.25 is rated poor.

Ratios worth recognising

16:9 is the video standard — YouTube, most screens, and most hero videos. 4:3 is classic photography and older displays. 1:1 squares suit avatars and product grids where uniformity matters more than composition. 9:16 is vertical video for stories and shorts. 1.91:1 — practically 1200 × 630 — is the Open Graph share image ratio, which is why our meta tag generator recommends exactly those dimensions.

Two ratios show up in design more than in specs: 3:2, the native ratio of most DSLR sensors, and 21:9 ultrawide, used for cinematic banners.

Scaling without distortion

The rule is simple and constantly broken: scale both dimensions by the same factor. If you halve the width, halve the height. Setting one dimension and eyeballing the other is what produces the subtly stretched images that make a site look amateur.

In CSS, object-fit handles the cases where a ratio mismatch is unavoidable. object-fit: cover fills the container and crops the overflow — right for thumbnails and hero images where composition matters less than filling the space. object-fit: contain fits the whole image inside, leaving empty space — right for logos and product shots that must not be cropped.

The modern CSS aspect-ratio property

For responsive containers whose dimensions aren't known in advance, aspect-ratio: 16 / 9 keeps a fluid element's shape at any width. It replaced the old padding-top percentage hack, which worked but was completely opaque to anyone reading the stylesheet later.

Use both approaches together: width and height attributes on the image element so the browser reserves space during load, and aspect-ratio in CSS for embeds, video wrappers and any container that must hold its shape as the layout flexes.

Developer Implementation Guide: CSS aspect-ratio Property

Before 2021, developers had to use the awkward "padding-top hack" to maintain responsive aspect ratios for videos and iframes. Today, native CSS provides a clean, single-line solution.

Using the native CSS aspect-ratio

The aspect-ratio property tells the browser how to calculate the height of an element based on its width (or vice-versa). This is incredibly powerful for preventing Cumulative Layout Shift (CLS) when images or embedded videos load.

/* The modern approach */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0; /* Placeholder color while loading */
}

/* Applying it to images to prevent layout shift */
.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* Ensures the image fills the space without squishing */
}
        

This property is now supported in all major browsers. It accepts either a fraction (like 16 / 9) or a decimal (like 1.777). If you only provide one number, the browser assumes it's divided by 1. For example, aspect-ratio: 1; perfectly creates a responsive square.