Calculate width and height from any aspect ratio — enter any ratio and get the matching dimensions, the CSS aspect-ratio property, legacy padding-top hack, and a list of common screen sizes for that ratio.
The CSS aspect-ratio property (e.g. aspect-ratio: 16 / 9) locks an element's width-to-height relationship so it scales proportionally without JavaScript. Before this property was widely supported, the "padding-top hack" was used — setting padding-top to a percentage of the width (e.g. 56.25% for 16:9) because padding percentages are always relative to the parent width, not height. aspect-ratio is now supported in all modern browsers and replaces the padding hack entirely. It works on any element, including replaced elements like img and video, and prevents layout shift while media loads.