CSS Aspect Ratio Generator

Home/Tools/Aspect Ratio Generator

Generate aspect ratio CSS for responsive media containers.

No sign-up neededRuns in your browserProduction-ready CSS

Aspect Ratio

Container Width

100

Calculated Values

Ratio: 16:9

Padding hack: 56.25%

Decimal: 1.7778

Preview

16:9

Common Use Cases

16:9Videos, YouTube embeds
4:3Standard photos, older TVs
1:1Profile images, icons
9:16Stories, mobile video
Generated CSS
/* Modern approach (aspect-ratio property) */
.aspect-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Fallback for older browsers (padding hack) */
.aspect-container-legacy {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
}

.aspect-container-legacy > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}