← Back to Tools

Aspect Ratio & CLS Calculator

Fix Google Core Web Vitals layout shift — generate pixel-perfect dimensions & CSS wrappers for images and video.

⚠ Tool Scope & Honest Limitations

Inputs

16:9 Video 4:3 Old TV 1:1 Square 9:16 Reels 3:2 Photo 21:9 Cinema 4:5 Portrait OG Image
Enter a positive whole number.
Enter a positive whole number.
Enter dimensions above PREVIEW

Generated Code

Simplified Aspect Ratio
—
padding-top value (CLS-prevention trick)
—
Reserves exact space before media loads → no layout shift
Full CSS
—
HTML Snippet
—

Known Ratio + One Dimension

Must be a positive number.
Must be a positive number.
Must be a positive number.
How it works: Enter a known ratio (e.g. 16:9) and either the final width or height in pixels. The tool solves for the missing dimension using exact proportional arithmetic and rounds the result to the nearest integer pixel.

Result

Calculated Dimensions
Fill in the fields on the left →
HTML <img> tag with explicit dimensions
—
Explicit width + height = browser reserves space before load = zero CLS for images
Equivalent padding-top %
—
Use this if you need a CSS wrapper instead of explicit attributes

Input

Format: width,height or width,height,name
Lines starting with # are treated as comments and skipped.
Note: decimal values are rounded to integers before processing.

Tip: Export all media dimensions from your CMS, Figma, or Sketch. Paste here, pick CSS or HTML, copy the output into your project.

Output

Paste dimensions on the left →

Why CLS Hurts Your Google Rankings — and How to Fix It

Cumulative Layout Shift (CLS) is one of Google's Core Web Vitals. A score above 0.1 actively hurts Search ranking. The most common cause: images and videos with no reserved space, so they push content down as they load. This tool generates the CSS and HTML you need to eliminate that shift entirely.

What is the padding-top trick?

Set padding-top: X% on a wrapper <div> where X = (height ÷ width) × 100. Because padding percentages are relative to the element's width, the browser reserves exactly that aspect-ratio space before media loads — preventing any layout shift.

Images: width/height vs CSS wrapper — which to use?

For <img> tags: set explicit width and height attributes. Modern browsers (Chrome 79+, Firefox 71+, Safari 15+) use them to infer ratio without any wrapper. For <iframe> embeds: use the padding-top wrapper, because iframes ignore HTML dimension attributes.

What is a good CLS score?

Good: 0.00–0.10 · Needs Improvement: 0.10–0.25 · Poor: above 0.25. Google rewards Good scores through the Page Experience ranking signal. Measure your actual score in Google Search Console or PageSpeed Insights — this tool only generates the fix, not the measurement.

Does aspect-ratio CSS replace the padding-top trick?

Yes — if you support modern browsers (Chrome 88+, Firefox 89+, Safari 15+). Use aspect-ratio: 16/9 directly on the element. The generated CSS includes this as a commented modern alternative. For any older browser support, the padding-top wrapper remains the safe, universal choice.

YouTube & Vimeo embeds

Both use 16:9. Apply the wrapper CSS this tool generates, then paste your <iframe> inside it and give the iframe position:absolute; top:0; left:0; width:100%; height:100%. That's it — fully responsive with zero CLS.

Responsive images and CLS

Setting explicit width and height attributes works even when the image has width:100% in CSS — the browser uses the attribute ratio to reserve space, not the literal pixel values. This is safe to use with srcset and responsive layouts.