Generate responsive aspect ratio containers using the aspect-ratio property or padding hack technique.
Turn a ratio like 16:9 into ready-to-paste CSS for a responsive box whose height always follows its width, so an embedded video, an image placeholder, or a card stays proportional at every screen size. The tool emits two variants: the modern `aspect-ratio` property and the older padding hack, in which vertical padding creates the height. The number people most often stumble on is the padding percentage, because it is not the ratio itself: 16:9 needs 56.25%, since percentage padding is always calculated from the box's width, never its height.
A concrete input and expected output from the current implementation.
Input
16:9 video embed
Expected output
.ratio-box {
aspect-ratio: 16 / 9;
width: 100%;
}
/* padding hack variant */
.ratio-box {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.ratio-box > * {
position: absolute;
inset: 0;
} The modern variant takes the ratio directly. The hack must express the height ratio as a percentage of the width ratio, because vertical percentage padding is measured against the box's width: 9 divided by 16 is 0.5625, so the padding is 56.25%.
Percentage padding - top, bottom, left, or right - always resolves against the containing block's width, never its height. The hack exploits that rule: a box with `height: 0` and `padding-bottom` set to the height ratio as a fraction of the width ratio gets exactly the right height at any width. Children then need `position: absolute` (typically `inset: 0`) so they fill the padded area instead of pushing it taller.
`aspect-ratio: 16 / 9` states the preferred ratio directly: declare one dimension and leave the other auto, and the auto one derives from it. Two caveats make "preferred" accurate rather than decorative: content taller than the ratio stretches the box, and if both width and height are explicitly set, the property has no effect. Every current browser has supported it since late 2021.
Because vertical padding percentages are always computed from the box's width, the padding must be the height ratio expressed against the width ratio: 9/16 = 0.5625, or 56.25%. Rounding to 56% makes the box 0.25% of its width too short - about 1 pixel at 400px, 3 pixels at 1280px - which can expose background along the bottom edge.
Only if you must support browsers released before 2021 - Chrome 87 and earlier, Firefox 88 and earlier, Safari 14 and earlier - none of which know the property. Everything current supports it, so for new projects the property is simpler and the ratio is readable at a glance. The hack remains useful mainly for reading and maintaining legacy code, which is full of it.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.