Turn any width and height into a reduced ratio, a decimal and the Tailwind class, resize to a new width while keeping the shape, and copy the aspect-ratio rule that reserves the space before the image loads.
/* CSS */
.media {
aspect-ratio: 16 / 9;
}
/* Tailwind */
<div className="aspect-video">
/* Decimal */
1.778
The property. The padding trick needs a wrapper with an absolutely positioned child and only works because padding percentages are relative to width. aspect-ratio applies to any element, keeps working when a min-height is set, and every current browser supports it.
Only 16:9 and 1:1 are common enough to earn a name. Everything else is an arbitrary value, aspect-[4/3], which compiles to the same property. The tool prints the named class when one exists and the arbitrary form otherwise.
By the greatest common divisor, the same way you would by hand. Dimensions with decimals are rounded to the nearest thousandth first so the ratio stays small enough to read.