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.

When aspect-ratio quietly stops working

The aspect-ratio property only takes effect when at least one dimension is automatic. Set both width and height and the ratio is ignored, which is the usual explanation when a box refuses to keep its shape. The second surprise is content. On an ordinary block, text taller than the ratio allows makes the box grow rather than overflow. That is deliberate, to stop text spilling out, but for a media frame or card thumbnail you usually want the ratio to win: set min-height: 0, or give the box overflow: hidden or auto.

/* Images: the width and height attributes supply the ratio */
img {
  max-width: 100%;
  height: auto; /* without this, the height attribute stays fixed */
}

/* Embeds have no natural ratio, so give them one */
.video-embed {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* A thumbnail frame that its content cannot push open */
.card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Ignored: both dimensions are already fixed */
.broken {
  width: 320px;
  height: 200px;
  aspect-ratio: 16 / 9;
}

The image rule matters more than it looks. Browsers map an <img>'s width and height attributes to aspect-ratio: auto width / height, which is how they reserve space before the file arrives. The height attribute also sets a height, though, so if your CSS makes the image fluid and forgets height: auto, it keeps that fixed height and stretches. Iframes and other embeds have no natural ratio, so they need an explicit one.

web.dev's guide to optimising Cumulative Layout Shift covers the image case in depth, and MDN documents every value of aspect-ratio.