← Back to Tools

Aspect Ratio & CLS Calculator

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

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 dimensions above
PREVIEW
Aspect Ratio
—
padding-top Trick (CSS — prevents CLS)
—
Reserves exact space before media loads → zero layout shift
Full CSS Wrapper
—
HTML Snippet
—
Missing Dimension
Enter values on the left →
HTML img tag (with explicit dimensions)
—
Explicit width+height attributes = browser reserves space = zero CLS
Why this matters: Setting explicit width and height on <img> tags lets the browser calculate aspect ratio before the image loads. This is the simplest CLS fix for images — no wrapper CSS needed.

Format: width,height,name — name is optional

Paste dimensions on the left →
Tip: Export all your page media dimensions from your CMS or Figma, paste here, get all wrapper CSS in one shot. Drop into your stylesheet and you're done.

Why CLS Destroys 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 your Search ranking. The most common cause: images and videos with no reserved space, so they push content down as they load.

What is the padding-top trick?

Set padding-top: X% on a wrapper div (where X = height/width × 100). The browser reserves that exact aspect-ratio space before media loads — eliminating layout shift entirely.

When to use explicit width/height vs CSS wrapper?

For <img> tags: always set width and height attributes — modern browsers use them to infer ratio. For <iframe> embeds (YouTube, Vimeo): use the CSS padding-top wrapper because iframes ignore HTML dimension attributes.

What's a good CLS score?

Good: 0.00–0.10. Needs Improvement: 0.10–0.25. Poor: above 0.25. Google rewards Good scores with ranking boosts via the Page Experience signal.

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. For older browser support, the padding-top wrapper is still the safe choice.

YouTube / Vimeo embeds

Both use 16:9. Apply the wrapper CSS this tool generates, paste your <iframe> inside it as position:absolute; top:0; left:0; width:100%; height:100%. Done.

Responsive images and CLS

Setting explicit width and height attributes works even for responsive images with width:100% in CSS — the browser uses the ratio from the attributes, not the pixel values.