Free Online CSS Aspect Ratio Generator with the Padding Hack
Choose 16:9, 4:3, 1:1, 3:2, 21:9, 9:16, the golden ratio or your own pair, and read the decimal along with the height a given width works out to. The aspect-ratio rule comes out ready to paste, and the old padding-top hack is written out too with the sum shown.
ratio 1.7778 960px wide is 540px tall padding-top 56.25%
Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.
When the Padding Hack Is Still Worth Writing
Rarely, and it is worth being specific about when.
aspect-ratio has been supported in every current browser since 2021, so for a
normal website you do not need the old trick. There are three places where it still earns
its keep. The first is an HTML email, where the rendering engines are years behind and
several of them strip properties they do not recognise. The second is an embedded webview
in an older app, particularly on Android devices that are still on a pinned system
WebView. The third is a product that has a written support floor including Internet
Explorer 11 or Safari 14, which some enterprise and government contracts still do.
The hack works because a percentage padding is resolved against the width of the
containing block, never the height. So a wrapper with padding-top: 56.25% and
no content is always 56.25% as tall as it is wide, which is 9 divided by 16. The child then
has to be taken out of flow with position: absolute and stretched over the
wrapper, because anything in normal flow would push the wrapper taller. That is the whole
trick, and it is also why it needs two elements where aspect-ratio needs none.
How to Set a CSS Aspect Ratio
A few steps, and nothing is uploaded.
What to Know About aspect-ratio
Including why it sometimes appears to do nothing.
aspect-ratio is ignored once both width and height are set. This is the answer to "aspect-ratio does nothing". The property only decides the missing dimension. Give the element a width and let the height be automatic, or the other way round, and the ratio applies. Set both and there is nothing left to work out, so the ratio is simply skipped. The same happens on a flex or grid item whose size is being decided by its container, and on an element whose height is being stretched by align-items: stretch.
position: relative and the padding, and the real content gets position: absolute with inset: 0. Two elements instead of none, which is why the modern property is worth having.
aspect-ratio sets a preferred size, not a hard limit: the automatic minimum size of a block means content that does not fit will stretch the element rather than overflow it. If you need the ratio kept no matter what, add min-height: 0 and let the content overflow or scroll. This catches people out with cards that look right until one of them has a long title.
object-fit is shown on a small placeholder that the page draws itself. It also does not read an existing rule back into the controls, so adapting a ratio you inherited means setting it again here.
Key Features & Capabilities
What this tool does, and what it deliberately does not.
About the CSS Aspect Ratio Generator
Keeping a box at a fixed shape while the page resizes used to be one of the fiddliest things in CSS. For over a decade the answer was a wrapper with a percentage top padding and a child pinned inside it, and every front end developer had the number 56.25 memorised without always remembering why. The aspect-ratio property replaced all of that with one declaration.
This page covers both. Pick a ratio and it applies the modern property to a real element, works out the decimal, and tells you what height a given width comes to, which is the calculation people actually need when checking a video embed or a design handoff. Ask for the fallback and you get the wrapper, the padding per cent and the pinned child, with the division written out rather than presented as a magic number.
The part that needed care was object-fit. It only applies to replaced elements such as img, video and iframe, and a demo that used a coloured div would be quietly lying, because the property has no effect there at all. So that section uses a genuine image element with a placeholder the page generates itself, which keeps the demonstration true without fetching anything.
Frequently Asked Questions
Ratios, object-fit, the padding hack and browser support.
aspect-ratio only fills in whichever of width and height you left automatic. If the element has an explicit width and an explicit height, or its height is being stretched by a flex or grid container, the ratio has no gap to fill. Set one dimension, leave the other as auto, and check for an align-self: stretch on the item.aspect-ratio since 2021. It is still worth writing for HTML email, for embedded webviews on older devices, and for a product whose support floor formally includes Internet Explorer 11 or Safari 14. Outside those cases the single property is smaller, needs no wrapper, and is easier to read.cover scales the image until it fills the box and crops whatever hangs over, so the box is always full but you may lose edges. contain scales it until the whole image fits, so nothing is cropped but there will be empty space on two sides. Use object-position with cover to choose which part of the picture survives the crop, which matters a lot for faces.aspect-ratio accepts a single number, so aspect-ratio: 1.618 is valid and means 1.618 / 1. The two-value form with a slash is usually clearer to read, and 16 / 9 is more obviously correct at a glance than 1.7778. This page writes the two-value form, and shows the decimal separately so you have both.Every Other Developer Tool
88 more tools in this set. All free, all in your browser.