← Back to Tools

Aspect Ratio & CLS Calculator

A free aspect ratio calculator and CLS fix generator for developers, designers, and SEOs. Enter any image or video dimensions to instantly get the simplified ratio, the exact padding-top percentage, and copy-paste-ready CSS & HTML — so images and embeds reserve their space before they load and stop pushing your page around.

⚠ 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 →

What This Aspect Ratio Calculator Does

Think of it as a small math helper for a very common front-end problem: browsers don't know how big an image or video will be until it finishes loading, so they leave zero space for it — then the page jumps the moment it arrives. This calculator takes any width and height (or a known ratio plus one side) and instantly works out the simplified ratio, the exact padding-top percentage, and ready-to-paste CSS and HTML that tell the browser "reserve this much space right now." No image upload, no account, no server round-trip — every calculation happens instantly in your browser tab.

How To Use It — Step By Step

  1. Get your dimensions. Check your image editor, browser DevTools, CMS media library, or Figma/Sketch export panel for the exact pixel width and height.
  2. Enter them or pick a preset. Type the numbers into the Calculate Ratio tab, or click a one-click preset like 16:9 Video, 9:16 Reels, or OG Image.
  3. Choose the media type. Pick Image, Video/iframe embed, or Custom div so the tool outputs the right fix — width/height attributes for <img>, a padding-top wrapper for iframes.
  4. Copy the CSS and HTML. Use the one-click copy buttons and drop the snippet straight into your project — no manual editing needed.
  5. Only know the ratio? Switch to the Find Missing Dimension tab, enter a known ratio (like 16:9) plus one pixel value, and let it solve the other side.
  6. Working across many assets? Use Batch Mode to paste a whole list of width,height,name lines and generate CSS, HTML, or a summary table for all of them at once.

Who This Tool Is For

This calculator is built for anyone shipping images or video on the web who cares about Core Web Vitals:

Why Use This Aspect Ratio & CLS Tool

100% Free, No Sign-Up

No account, no paywall, no email gate. Calculate as many ratios as you need, for as many projects as you like, at no cost.

Fully Private — Runs In-Browser

Every calculation happens locally in JavaScript. Your dimensions, class names, and batch data are never sent to a server or stored anywhere.

Instant Results

No loading spinners or API calls — ratios, padding-top percentages, and code snippets update the moment you type or paste.

Copy-Paste Ready Code

Get production-ready CSS and HTML, not just numbers — including a commented modern aspect-ratio fallback for newer browsers.

Three Tools In One

Calculate a ratio, solve for a missing dimension from a known ratio, or process an entire batch list — all without leaving the page.

Quick Examples

A few common real-world cases this calculator handles in one step:

A YouTube embed (1920 × 1080)

Simplifies to 16:9, padding-top 56.25%. Pick "Video / iframe embed," copy the wrapper CSS, drop your iframe inside — the player stays perfectly responsive with no jump on load.

An Open Graph share image (1200 × 630)

Common for link previews on social platforms. Simplifies to 40:21, padding-top 52.5% — useful for blog cards and preview components that render before the OG image finishes loading.

An Instagram Reels clip (1080 × 1920)

A vertical 9:16 ratio, padding-top 177.7778%. Great for testing how a tall wrapper behaves — the tool's status badge flags very tall ratios so you can double-check the layout.

Product photos on an e-commerce grid

Say your CMS exports thumbnails at 800 × 600 (4:3). Add width="800" height="600" to every <img> tag — the Batch Mode tab can generate this for hundreds of products in one paste.

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.

How do I calculate an aspect ratio manually?

Divide both width and height by their greatest common divisor (GCD). For example, 1920 × 1080 shares a GCD of 120, simplifying to 16:9. This calculator does that instantly so you don't have to work it out by hand.

Does this work for WordPress, Webflow, or Shopify?

Yes. The generated CSS and HTML are plain, framework-agnostic code — paste the class into your theme's stylesheet or a custom CSS block, and the HTML into any content or template area, regardless of platform.

What's the difference between CLS and page load speed?

They're related but different Core Web Vitals. Load speed (LCP) measures how fast content appears; CLS measures how much it visually moves after it appears. A fast page can still fail CLS if elements shift as assets arrive — which is exactly what reserving space with this tool prevents.

Can I use this for print or app design ratios too?

The math works for any two numbers — print layouts, app icons, or design mockups — but the generated CSS/HTML output is built specifically for web pages using padding-top wrappers or image attributes.