jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free Aspect Ratio Placeholder Calculator

Choose a preset ratio or enter custom dimensions. Get the modern aspect-ratio CSS and the padding-bottom percentage fallback for older browsers. Reserve space for images and embeds before they load.

Loading tool...

What is Aspect Ratio Placeholder Calculator?

Aspect-ratio is a CSS property that sets a preferred aspect ratio for an element, letting the browser calculate the height from the width before content loads. This prevents Cumulative Layout Shift (CLS), a Core Web Vitals metric that measures visual stability. By reserving the correct space for images, videos, and embeds ahead of time, the page layout stays stable as resources load.

quickAnswer

Calculate the CSS aspect-ratio value and padding-bottom fallback percentage to prevent Cumulative Layout Shift. Reserve the correct space for images, videos, and embeds before they load.

Last updated: 2026-06-11

limitations

  • The padding-bottom fallback technique requires position: relative on the parent container and position: absolute on the child element for correct sizing behavior.
  • Aspect-ratio only works when the element has a defined width. If the element width is auto or not set, the aspect-ratio calculation has no basis to compute the height.
  • Using aspect-ratio without a defined width or height on images can cause Cumulative Layout Shift during page load. Always set a width or height attribute on img elements or an explicit CSS dimension alongside aspect-ratio so the browser can reserve space before the image loads.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Select a preset ratio such as 16:9, 4:3, or 1:1, or enter custom width and height values.
  2. View the generated aspect-ratio CSS value for modern browsers.
  3. Copy the padding-bottom fallback for browsers that do not support the aspect-ratio property.
  4. Apply the wrapper markup to your image or embed element. The placeholder reserves the correct height before the resource loads.

What you can use it for

  • Reserve space for hero images on blog posts so the layout does not jump when the image loads.
  • Create stable video embed containers for YouTube or Vimeo iframes that preserve the player aspect ratio.
  • Build placeholder boxes for lazy-loaded images in a gallery grid.

Use cases

Practical examples

example

Blog hero image with 16:9 ratio

A blog wraps the hero image in a container with aspect-ratio: 16/9. The browser reserves a 16:9 box before the image URL loads, preventing the title and intro text from shifting downward.

example

Video embed with padding-bottom fallback

A tutorial page embeds YouTube iframes in a 16:9 wrapper. The aspect-ratio property handles modern browsers, and the padding-bottom: 56.25% fallback covers Safari 14 and older Android browsers.

Common mistakes

  • Applying aspect-ratio to an image but not setting a defined width, which leaves the element with zero size in some layout contexts.
  • Adding a fixed height attribute on the same element that uses aspect-ratio, which creates a conflict and breaks the ratio.
  • Using aspect-ratio without testing the padding-bottom fallback in browsers that do not support it, which causes layout shift in older browsers.

verification

  1. Load the page at different viewport widths and verify the placeholder maintains the correct aspect ratio without layout shift when the image loads.
  2. Test on an older browser by temporarily disabling the aspect-ratio property in DevTools and confirming the padding-bottom fallback preserves the ratio.

FAQ

Questions about Aspect Ratio Placeholder Calculator

Which browsers support the aspect-ratio CSS property?

Aspect-ratio is supported in all modern browsers as of 2024. Chrome 88, Firefox 87, Safari 15, and Edge 88 all support it. For older browsers, use the padding-bottom percentage fallback.

What is a good default aspect ratio for blog images?

16:9 is a common choice for blog hero images and video embeds. 4:3 works well for screenshots and photos. 1:1 is useful for profile pictures and product thumbnails.

Do I still need the padding-bottom hack?

The padding-bottom percentage fallback is only needed for browsers that do not support the CSS aspect-ratio property. Most modern browsers support aspect-ratio directly. Use the fallback when you need to support Safari 14 and earlier or older Android browsers.

Should I set both width and height with aspect-ratio?

Setting both width and height on the element alongside aspect-ratio creates a sizing conflict. The aspect-ratio property calculates the missing dimension from the one you set. Set one dimension with aspect-ratio or use explicit width and height without aspect-ratio.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool