Generator Tools

CSS Aspect Ratio Generator

Generate CSS aspect-ratio rules with live preview, presets for 16:9, 4:3, 1:1, 21:9, 9:16, plus the padding-bottom fallback, Tailwind classes, and JSX.

Common ratios

Controls

Custom ratio

Width

Height

Values are reduced automatically. 16:9 stays 16:9; 1920:1080 becomes 16:9 in the output.

Container width480px (preview)

Content type

YouTube, Vimeo, maps, or any other embed.

CSS selector

The selector wrapped around the generated rule. Try .ratio-box, a custom class, or any selector you already use.

Live preview

16:9 at 480 x 270px

16:9

decimal 1.7778

480 x 270px

The preview applies the modern aspect-ratio property, the same rule the Modern CSS output below ships. The dashed border is decorative only; the actual box shape is what gets exported.

Ratio

16:9

Decimal

1.7778

Padding

56.25%

Pixels

480 x 270

Modern CSS

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

Recommended. The aspect-ratio property ships in every evergreen browser since 2021. One rule, no extra markup, no positioning.

Tailwind utility

aspect-video w-full

Tailwind ships aspect-video (16:9) as a core utility.

Legacy CSS (padding hack)

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

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

Works in every browser ever shipped, including older WebKit, embedded WebViews, and HTML emails. Requires an absolutely positioned child.

JSX / React inline style

<div
  style={{
    width: "100%",
    aspectRatio: "16 / 9",
  }}
>
  {/* content */}
</div>

Drop into a React or Next.js element. React accepts the standard CSS string syntax 'W / H' for aspect-ratio.

Hybrid CSS (modern + fallback)

.ratio-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* fallback for older browsers */
}

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

@supports (aspect-ratio: 1 / 1) {
  .ratio-box {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
  .ratio-box > * {
    position: static;
    width: auto;
    height: auto;
  }
}

@supports query lets modern browsers use aspect-ratio while older engines fall back to padding-bottom. Safest single-block answer when you need wide support.

SVG viewBox

viewBox="0 0 16 9"

The corresponding viewBox attribute for an SVG illustration at this ratio. Useful when designing responsive hero artwork.

HTML demo

<style>
.ratio-wrap { max-width: 480px; margin: 0 auto; }
.ratio-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* fallback for older browsers */
}

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

@supports (aspect-ratio: 1 / 1) {
  .ratio-box {
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
  }
  .ratio-box > * {
    position: static;
    width: auto;
    height: auto;
  }
}
</style>

<div class="ratio-wrap">
  <div class="ratio-box">
    <iframe
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      title="Embedded content"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
</div>

Self-contained snippet with the hybrid rule, a sized wrapper, and your chosen content. Paste into a CodePen, JSFiddle, or scratch HTML file.

Notes on the techniques

aspect-ratio property: sizes the box without an extra wrapper. Supported in Chrome 88+, Edge 88+, Firefox 89+, Safari 15+ (Sep 2021). Use this for new code.
Padding hack: wrap the content in a parent with padding-bottom: 56.25% and absolutely position the child. Works everywhere because percentage padding resolves against the parent inline size.
Why the percentage: (height / width) * 100. At 16:9 that is 9 / 16 = 56.25%. At 4:3 it is 75%. At 1:1 it is 100%.
Tailwind utilities: aspect-square (1:1), aspect-video (16:9), aspect-auto, and the arbitrary-value aspect-[W/H] are all core in v3.0+.
Iframes and videos: when using the legacy hack, the iframe or video must be the absolutely positioned child filling the box. The modern property removes that requirement.
Email clients: Gmail and most email clients strip the aspect-ratio property. Use the padding hack for HTML emails and newsletter templates.

Current configuration

Ratio: 16:9
Decimal: 1.7778
Padding-bottom: 56.25%
Container: 480 x 270px
Selector: .ratio-box
Content: Iframe

How to use

Pick a common ratio (16:9, 4:3, 1:1, 21:9, 9:16, 3:2, 4:5, 2:3, 1.91:1, or golden) or type any custom width and height; values reduce automatically.
Adjust the container width slider to see the rendered pixel dimensions at your real layout size.
Choose the content type (image, iframe, video, or a custom div) so the HTML demo block ships the right markup.
Optionally rename the CSS selector (default .ratio-box) to match the class you already use.
Copy the output you want: Modern CSS (one property, evergreen browsers), Legacy CSS (padding-bottom hack, works in HTML email), Hybrid CSS (modern with @supports fallback), Tailwind class, JSX inline style, SVG viewBox, or the self-contained HTML demo.

About this tool

CSS Aspect Ratio Generator builds the rules you need to lock a container to a fixed width-to-height ratio, with a live preview of the exact box the export will produce. Pick a common ratio (16:9 video, 4:3 classic, 1:1 square, 21:9 cinematic, 9:16 vertical for Reels and Stories, 3:2 DSLR, 4:5 Instagram portrait, 2:3 Pinterest, 1.91:1 Open Graph share image, golden 1.618:1) or type any width and height; values are reduced automatically so 1920:1080 becomes 16:9 in the output. The tool emits six integrations side by side so you can pick the one that fits your stack. The Modern CSS block ships the standard aspect-ratio property from CSS Box Sizing Level 4, supported in every evergreen browser since Chrome 88, Edge 88, Firefox 89, and Safari 15 in 2021; one rule, no extra markup, no positioning. The Legacy CSS block writes the classic padding-bottom hack (percentage padding computed as height divided by width times one hundred) with an absolutely positioned child that fills the box, which works in every browser ever shipped including older WebKit, embedded WebViews, IE 11, and HTML email clients like Gmail that strip the aspect-ratio property. The Hybrid block combines both behind an @supports query so modern engines use the clean property while older engines fall back automatically. Tailwind output uses the named utilities aspect-square (1:1) and aspect-video (16:9) when they match, and falls back to the arbitrary-value aspect-[W/H] form supported in Tailwind v3.0+ for every other ratio. A JSX inline-style snippet uses React's camelCase aspectRatio key, ready to drop into a Next.js or Vite component. An SVG viewBox attribute computes the exact 0 0 W H values for hero illustrations at the same ratio. A self-contained HTML demo wraps your chosen content (responsive image, iframe embed, HTML5 video, or a custom div) in a sized container and the hybrid rule so you can paste it directly into a CodePen, JSFiddle, or scratch HTML file. The preview surface shows the box at your chosen container width with the exact ratio, the decimal value, the padding-bottom percentage, and the rendered pixel dimensions, so you can sanity check the sizing before shipping. Everything runs locally in your browser. No values, container sizes, selectors, or content choices leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Aspect Ratio Generator

How to use

About this tool

You may also like

Aspect Ratio Calculator

CSS Scroll Snap Generator

CSS Flexbox Generator

CSS Grid Generator

CSS Clamp Generator

CSS Line Clamp Generator