Aspect ratio calculator › CSS

CSS Aspect Ratio Calculator

By the RatioForge team · Last updated July 2026

Use this CSS aspect ratio calculator when you need a responsive box, image wrapper, video embed or card layout to keep its shape across screen sizes. Enter a ratio or pixel dimensions, then generate a modern CSS aspect-ratio value and, where needed, a percentage padding fallback.

CSS aspect ratio calculator

Common CSS ratios

CSS formulas

• Modern CSS: aspect-ratio: width / height;
• Padding fallback: padding-bottom = height ÷ width × 100%;
• Example 16:9: 9 ÷ 16 × 100 = 56.25%.

Worked example. Say you are building a responsive 16:9 video wrapper. The modern one-liner is aspect-ratio: 16 / 9; on the container. For the padding fallback, divide height by width: 9 ÷ 16 = 0.5625, then × 100 = 56.25%, so the wrapper gets padding-bottom: 56.25%;. A 4:5 card works the same way — 5 ÷ 4 × 100 = 125% — and a 1:1 avatar is 1 ÷ 1 × 100 = 100%. The ratio in aspect-ratio is written width-first (16 / 9), but the padding percentage is always height ÷ width, which trips people up.

Modern CSS vs padding fallback

For modern layouts, CSS has a native aspect-ratio property. A 16:9 box can be written as aspect-ratio: 16 / 9;, which is easier and clearer than older padding hacks. This is useful for videos, image placeholders, product cards and responsive embeds.

The older padding-bottom technique still matters when supporting legacy code or when a project already uses intrinsic-ratio wrappers. In that method, the percentage is based on height divided by width. RatioForge can turn a visual ratio into both forms so designers and developers speak the same language.

This page targets developers, not general social-media users. A design ratio can become either aspect-ratio: 16 / 9; or an older intrinsic-ratio padding value — useful for responsive video embeds, image placeholders, product cards, hero sections and skeleton layouts where the browser must reserve space before media loads.

The calculator above outputs copyable CSS for both approaches. Useful examples include 16:9 video wrappers, 1:1 avatar boxes, 4:5 card previews and 21:9 hero banners. For non-code sizing use the main aspect ratio calculator; if you start from pixel dimensions, the image aspect ratio calculator finds the ratio first.

The modern method: the aspect-ratio property

The cleanest way to lock a box to a shape is the native aspect-ratio property. Set it on a wrapper and let the media fill that wrapper, so the browser reserves the correct height before the image or video loads — no layout shift:

.media-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.media-wrap > img,
.media-wrap > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The object-fit: cover line crops the media to fill the box without distortion; use contain instead if you would rather letterbox than crop. Because aspect-ratio accepts any ratio, swap 16 / 9 for 1 / 1, 4 / 5 or 21 / 9 and the wrapper follows.

The classic intrinsic-ratio padding hack

Before aspect-ratio shipped, developers reserved space with a percentage padding-bottom on a position: relative wrapper and stretched the child over it with absolute positioning. The percentage is height ÷ width — 56.25% for 16:9:

.ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
}

.ratio-box > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

This still works everywhere and is worth knowing when you inherit an older codebase, but it needs two elements and an easy-to-miss percentage instead of one readable line.

Progressive enhancement with @supports

If you must support very old browsers but want the clean property everywhere else, ship the padding fallback as the base and upgrade inside an @supports query. Browsers that understand aspect-ratio drop the padding hack; the rest keep it:

.ratio-box {
  position: relative;
  padding-bottom: 56.25%;
}

@supports (aspect-ratio: 1) {
  .ratio-box {
    aspect-ratio: 16 / 9;
    padding-bottom: 0;
  }
}

In practice most projects can now drop the fallback entirely — see the support table below.

Browser support

The aspect-ratio property is baseline in every current browser and has been supported since roughly early-to-mid 2021, so a plain aspect-ratio: 16 / 9; is safe for the vast majority of visitors today:

Reach for the padding fallback or an @supports query only when your analytics show meaningful traffic from browsers older than these.

Responsive video embed

A YouTube or Vimeo <iframe> ships with fixed width and height attributes, which breaks on small screens. Wrap it in an aspect-ratio box and let it scale fluidly instead:

<div class="video-wrap">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video player"
    allowfullscreen></iframe>
</div>

.video-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-wrap > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Drop the width and height attributes from the embed code (or leave them as a pre-CSS fallback); the wrapper now controls the shape at every screen size.

Common ratios at a glance

Each box uses one line — aspect-ratio: 16 / 9;, aspect-ratio: 1 / 1; and aspect-ratio: 4 / 5; — and stays that shape at any width. Use the calculator above to generate the value and its padding-bottom equivalent for any ratio you need.

Frequently asked questions

Related calculators and guides

• Aspect ratio calculator — the main calculator with custom ratios
• 16:9 aspect ratio calculator — the most common CSS video ratio
• Image aspect ratio calculator — start from pixel dimensions
• How to calculate an aspect ratio — the math, step by step
• Aspect ratio vs. resolution — shape versus pixels