Aspect Ratio CSS Generator
Turn any width and height into ready-to-paste CSS: the aspect-ratio rule, the simplified ratio, the padding-top fallback percentage and a live preview.
- The one line of CSS
-
aspect-ratio: 16 / 9; - Ratio
- 16 : 9
- Decimal
- 1.7778
- padding-top
- 56.25%
- Tailwind
- aspect-[16/9]
Edit either box to keep the ratio.
Generated CSS (4 lines)
.media {
aspect-ratio: 16 / 9;
width: 100%;
} How it works
Type any width and height — real pixel dimensions such as 1920 by 1080 work just as well as
the bare numbers 16 and 9 — and the generator reduces them to their smallest whole-number
form with a greatest-common-divisor calculation, then writes the CSS for you. The main rule
uses the aspect-ratio property from the CSS Box Sizing Module Level 4, which
every current browser has supported since 2021: the box keeps its shape at any width, so a
video wrapper, a card image or a map embed never collapses or jumps while it loads.
Tick the fallback option and you also get the classic padding-top hack wrapped in an
@supports not block. That trick works because a percentage padding is resolved
against the width of the element itself, so a padding-top of 56.25% is exactly 9 divided by
16 of the width and reproduces 16:9 on browsers too old for the modern property. The
object-fit option adds the companion rule that makes an image or video fill the box without
stretching. Everything is computed in your browser with plain JavaScript: nothing is
uploaded, nothing is logged, and the page keeps working offline once it has loaded.
Frequently asked questions
How do I make a responsive 16:9 box in CSS?
Give the element aspect-ratio: 16 / 9 together with width: 100%. The box then keeps its shape at every screen width, which is exactly what this generator writes for you. Type 1920 and 1080 (or just 16 and 9) and copy the rule. The aspect-ratio property is part of the CSS Box Sizing Module Level 4 and has been supported by every current browser since 2021, so you rarely need anything else.
What is the padding-top percentage for a 16:9 aspect ratio?
56.25%, because 9 divided by 16 is 0.5625. A percentage padding is resolved against the width of the element itself, so padding-top: 56.25% on a full-width box produces a 16:9 shape. Tick the fallback option and the generator adds that rule inside an @supports not (aspect-ratio: ...) block, along with the absolutely positioned child rule the hack needs, so old browsers get the same layout without affecting modern ones.
Can I use real pixel dimensions instead of a ratio?
Yes. Enter 1280 and 800 and the tool reduces them with a greatest-common-divisor calculation to 8 : 5, then reports the decimal ratio, the padding percentage and the Tailwind class. Decimals work too: 1.618 by 1 reduces exactly to 809 : 500 rather than being rounded. The scale boxes go the other way, so you can ask what height a 1000px wide element needs to stay on ratio.