CSS Aspect Ratio Box

Generate CSS for responsive aspect-ratio containers with the modern aspect-ratio property and padding-bottom fallback.

Preview

16:9

Padding-bottom: 56.2500%

Settings

Presets

Width Ratio16

Height Ratio9

Max Width600px

Background Color

Modern CSS (aspect-ratio)

.aspect-ratio-box {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  background: #3b82f6;
}

Fallback CSS (padding-bottom)

.aspect-ratio-box {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding-bottom: 56.2500%;
  background: #3b82f6;
}

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

Was this page helpful?

CSS Aspect Ratio Box

Related tools