CSS aspect ratio padding calculator

Enter any positive dimensions, such as 16 and 9, and receive a ready-to-copy percentage string. The calculation is useful when maintaining older stylesheets, supporting browsers where a padding-based fallback is required, or generating embedded media wrappers from stored dimensions. It performs one deterministic calculation, keeps no data, and returns the same result in the browser and through the API.

Turn dimensions into responsive vertical space

A percentage used for vertical padding in CSS is resolved against the containing block's width. That behavior makes padding-top a practical way to reserve height before an image, video, iframe, or other embedded item loads. This calculator divides the supplied height by the supplied width, multiplies the result by one hundred, and appends the percent sign. For a widescreen box, the familiar 16 by 9 dimensions therefore produce a value that can be placed directly in a padding-top declaration. The dimensions do not need to be pixels and they do not need to describe a large asset. They only need to use the same unit because the calculation depends on their proportion. A 1600 by 900 asset, a 160 by 90 thumbnail, and a 16 by 9 design frame all reserve the same relative space. Use positive finite numbers for both fields; zero, negative values, missing values, and nonnumeric text are rejected rather than producing misleading or unusable CSS.

Apply the percentage in a CSS fallback

The calculated string is intended for the established intrinsic-ratio box pattern. Put the percentage on a wrapper's padding-top, give that wrapper a relative position, and position its child absolutely so the child fills the reserved area. The wrapper can then follow the available width while its vertical padding preserves the requested proportion. Modern CSS provides the aspect-ratio property, which is usually clearer for new code, but padding-based boxes remain relevant in legacy stylesheets, compatibility fallbacks, email-adjacent rendering systems, generated snippets, and codebases that already standardize on this technique. Treat the returned value as CSS text rather than as a new ratio. If your source dimensions are width 4 and height 3, enter them in that order; reversing them intentionally creates a portrait box instead of a landscape box. The tool does not inspect an image or infer orientation. It performs only the explicit conversion, making the output predictable and suitable for build scripts, template generators, and migration tools.

Choose dimensions and interpret precision

Use the intrinsic width and height when you want the wrapper to match a real asset, or use design dimensions when you are reserving a planned slot. Large dimension values are acceptable as long as they are finite positive numbers, but scaling both values down by the same factor makes no difference to the result. Decimal dimensions are also supported, which is useful when the ratio comes from measured layout data rather than an integer media size. The result is formatted compactly as a percentage string while retaining enough significant precision for practical CSS layout. Browsers may display subpixel rounding at particular viewport widths, so a mathematically precise percentage does not guarantee that every rendered edge lands on a whole device pixel. That is normal layout behavior, not a changed aspect ratio. When exact modern behavior is available, consider declaring aspect-ratio as the primary rule and using this calculated padding value only for the fallback. Through the API, each deterministic request costs $0.002; the browser version can perform the same pure calculation locally.