ADVERT

📐 Aspect Ratio Box Generator

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)

Output mode

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-box::before {
  content: "";
  display: block;
  padding-bottom: calc(100% * 9 / 16);
}

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

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

  .aspect-box::before {
    display: none;
    padding-bottom: 0;
  }

  .aspect-box > .aspect-box__content {
    position: static;
    width: 100%;
    height: 100%;
  }
}

HTML scaffold

<div class="aspect-box">
  <div class="aspect-box__content">
    <!-- Content goes here -->
  </div>
</div>

Tailwind snippet

<div class="relative w-full aspect-[16/9]">
  <div class="absolute inset-0">
    <!-- Content goes here -->
  </div>
</div>