jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

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.

Quick answer

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.

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.

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

Also try

Also try