CSS aspect-ratio generator
Enter a width and a height to instantly get the matching CSS aspect-ratio value, simplified and with a visual preview. The calculation runs entirely in your browser, nothing is sent to a server.
How it works
The CSS property aspect-ratio automatically preserves an element's proportions (image, video, container) even when its width changes, without relying on percentage padding tricks. This tool calculates the ratio from the dimensions you enter, simplifies it if possible, and shows a preview of the resulting rectangle.
Why use aspect-ratio instead of a fixed height?
A fixed pixel height breaks the layout on a narrower or wider screen; aspect-ratio keeps the correct width/height ratio regardless of the actual size of the element, which is especially useful for responsive videos, image cards, or gallery thumbnails.
What does the displayed simplified ratio mean?
The tool automatically reduces your width/height ratio to its simplest form (for example, 1920 / 1080 becomes 16 / 9) using the greatest common divisor, giving you a value that is easier to read and reuse in your stylesheet.
100% local processing: the calculation and preview run entirely in your browser.