Aspect Ratio Calculator

Calculate dimensions and generate CSS aspect-ratio code for responsive containers.

Ratio & Size

Width Ratio

Height Ratio

Width (px) → calculate height

1280

Width (px)

720

Height (px)

16/9

CSS aspect-ratio

1.7778

Decimal ratio

56.25%

padding-top (legacy method)

Visual Preview

16:91280×720

Generated CSS

.aspect-box {
  aspect-ratio: 16/9;
  width: 100%;
  /* height will be calculated automatically */
}

/* Alternative with padding-top (legacy support) */
.aspect-box-legacy {
  position: relative;
  padding-top: 56.2500%;
  overflow: hidden;
}
.aspect-box-legacy > * {
  position: absolute;
  inset: 0;
}