ADVERT

📐 Aspect Ratio Box

Generate aspect-ratio CSS plus the padding-bottom fallback snippet. Copy a ready-to-use responsive wrapper for any width and height.

Aspect Ratio Box Generator

Create a responsive container with modern aspect-ratiosupport and an automatic padding-bottom fallback for older browsers.

Dimensions

Width ratioHeight ratio

Class name

CSS selector

Aspect ratio: 16:9 (1.7778:1)
Fallback padding: calc(100% * 9 / 16)

Preview

Aspect ratio16:9padding-bottom 56.25%

The box uses both the aspect-ratio property and the padding-bottom fallback, matching the generated CSS.

CSS output

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

.aspect-box::before {
  content: "";
  display: block;
  padding-bottom: calc(100% * 9 / 16);
}

@supports (aspect-ratio: 1 / 1) {
  .aspect-box::before {
    display: none;
    padding-bottom: 0;
  }
}

.aspect-box > * {
  position: absolute;
  inset: 0;
}

ADVERT

More like this

Decode JWT header and payload safely in your browser. Inspect claims and structure without sending tokens anywhere.

Parse cron expressions and preview next run times. Useful for devs managing scheduled tasks and crontab jobs.

Compute HMAC signatures with SHA-256, SHA-1, or MD5 using a secret key. Secure online hashing tool.

Test and debug JavaScript regular expressions. Highlight matches and quickly verify regex patterns.

Parse a URL into protocol, host, path, query string, and hash. Quick online URL analyzer tool.

Minify and compress JavaScript code instantly. Reduce file size with Terser-style compression and improve load speed.

Minify CSS online by removing whitespace, comments, and redundancy. Optimize your stylesheets quickly.

Minify HTML code instantly. Remove comments, extra spaces, and reduce file size for faster websites.

ADVERT