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.
2236 blocks and 1325 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.
Browse the blocksNo signup for the tools. MIT for free blocks, commercial licence for Pro.