Aspect Ratio Calculator
Enter a width and height to get the simplified ratio and the matching Tailwind class, then scale to a new width or height without distorting the shape.
Height: 450
aspect-video
aspect-[16/9]
aspect-ratio: 16 / 9;
Frequently asked questions
How do I set an aspect ratio in Tailwind CSS?
Use aspect-video for 16:9, aspect-square for 1:1, or aspect-4/3 style classes in Tailwind v4. On any version aspect-[4/3] works as an arbitrary value. Add w-full so the element has a width to base the height on.
How do I calculate the height for a given width?
Multiply the new width by the original height and divide by the original width. Scaling 1920 by 1080 down to 800 wide gives 800 x 1080 / 1920 = 450.
What is the aspect ratio of 1920 by 1080?
16:9. Divide both numbers by their greatest common divisor, 120, and you get 16 and 9. It is the standard ratio for HD video and most monitors.
Why use aspect ratio utilities instead of fixed heights?
The box keeps its shape at every width, which prevents layout shift while images and videos load and avoids hard-coded heights at each breakpoint.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.