CSS Aspect Ratio Generator
What aspect-ratio does
The aspect-ratio property holds a box to a fixed proportion as its width changes, which retired the old padding-top percentage hack. Pair it with object-fit to decide how an image behaves inside that box when its own proportions do not match.
Syntax
aspect-ratio: <width> / <height>; object-fit: <fit>; object-position: <position>;| Part | What it controls |
|---|---|
| aspect-ratio | Takes a ratio such as 16 / 9, or a single number. The browser derives the missing dimension from the one that is set. |
| object-fit: cover | Fills the box and crops the overflow. The default choice for photos in a fixed-ratio frame. |
| object-fit: contain | Fits the whole image inside, letterboxing the remainder. Right for logos and anything that must not be cropped. |
| object-fit: fill | Stretches to the box, distorting the image. Almost never what you want, and it is the default. |
| object-position | Which part survives the crop. 50% 25% keeps faces in frame far more often than the centre default. |
| width and height attributes | Keep them on the img tag. Browsers compute an aspect ratio from them and reserve the space, which prevents layout shift before the image loads. |
Notes from practice
It replaced the padding hack
The old technique was a wrapper with padding-top: 56.25% and an absolutely positioned child. aspect-ratio is one declaration and needs no wrapper at all.
Content can still override it
aspect-ratio is a suggestion when the content is bigger than the box. Add min-height: 0 or overflow: hidden if a stubborn child is stretching the ratio.
Width and height attributes are not redundant
Even with CSS sizing, keeping the intrinsic width and height on the img lets the browser reserve the right space during loading, which is a direct Cumulative Layout Shift win.
CSS Aspect Ratio Generator FAQ
How do I make a 16:9 box in CSS?
Set aspect-ratio: 16 / 9 on the element. The height follows from whatever width it ends up with, so it stays correct at every screen size with no wrapper and no padding hack.
What is the difference between object-fit cover and contain?
cover fills the whole box and crops whatever does not fit, keeping the image's proportions. contain fits the entire image inside the box, leaving empty space on the sides or top. Use cover for photos and contain for logos that must not be cropped.
How do I stop images shifting the layout while they load?
Keep the width and height attributes on the img element. The browser computes the aspect ratio from them and reserves the correct space before the file arrives, which removes the layout shift.
Why is my aspect-ratio being ignored?
Content larger than the box wins. If a child's intrinsic size is pushing the element taller, aspect-ratio gives way. Adding overflow: hidden, or min-height: 0 on a flex or grid child, usually restores the ratio.
How do I control which part of an image is cropped?
Use object-position. With object-fit: cover, object-position: 50% 25% keeps the upper-middle of the image, which is far better for photos of people than the default centre crop.
Related generators
- CSS Grid — Define tracks, gaps, alignment and auto-placement, then make one item span rows and columns.
- Container Queries — Style a component by the width of its own container instead of the viewport.
- Border Radius — Round each corner on its own, or switch to elliptical radii for organic blob shapes.
- Placeholder Image — Make a dummy image at any size for layouts and prototypes. Generated in the browser, so it works offline. Copy it as an img tag, SVG, data URI, CSS background or PNG.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.