CSS Aspect Ratio Box
Generate CSS to keep a container at a fixed aspect ratio, and copy the code.
A box that holds its shape
Sometimes a container needs to keep a fixed aspect ratio as it resizes — a video wrapper, an image placeholder, a card that must stay a certain shape. This generates the CSS to lock a container to a chosen ratio and copies the code, so the box keeps its proportions at any width.
Set the ratio and copy the CSS.
Why fixed-ratio boxes matter
Keeping a container at a fixed ratio solves several real problems: it reserves the right space for a video or image before it loads, preventing the page from jumping as content arrives, and it keeps a grid of cards uniform even when their content differs. Modern CSS has a dedicated aspect-ratio property that makes this simple, where it once required an awkward padding trick — and generating the code handles whichever approach suits, including a fallback for older browsers. Reserving space by ratio is also good for perceived performance, since a page that does not shift around as things load feels far more stable and polished to use.
Common questions
Why keep a container at a fixed ratio?
To reserve the right space before content loads, preventing the page jumping, and to keep grids of cards uniform regardless of their content.
How is it done in modern CSS?
With the dedicated aspect-ratio property, which is far simpler than the old padding trick once needed — with a fallback for older browsers.
Is anything uploaded?
No. The code is generated in your browser.