CSS Aspect Ratio Box Generator
Keep a box at a fixed aspect ratio as it scales. Enter the ratio and pick the modern aspect-ratio property or the classic padding-top fallback, then copy the CSS.
How to generate an aspect ratio box
- Enter the width and height of the ratio, such as 16 and 9.
- Choose the modern aspect-ratio property or the padding fallback.
- Copy the CSS and wrap your image, video or iframe in the container.
Examples
16:9 modern
width 16, height 9, method aspect-ratio
aspect-ratio: 16 / 9;
16:9 padding fallback
width 16, height 9, method padding
padding-top: 56.25%;
Frequently asked questions
What is the difference between the two methods?
The aspect-ratio property is the modern one-line approach and is well supported. The padding-top trick is the classic fallback that reserves height as a percentage of width for older browsers.
How is the padding-top percentage calculated?
It is the height divided by the width, times 100. For 16 by 9 that is 9 / 16 = 56.25%, which makes a wrapper that always keeps the ratio as it grows.
Why is the ratio reduced, like 1920x1080 to 16 / 9?
The tool divides both numbers by their greatest common divisor so the label is the simplest equivalent ratio. The math gives the same result either way.
Why does the padding method need an absolute child?
The padding reserves the space, but it leaves no room for content, so the child is positioned absolutely to fill the box. Put your image, video or iframe inside that child.
Is anything sent to a server?
No. The CSS is generated in your browser and your ratio values are never uploaded.
Related tools
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
CSS Clamp Generator
Generate a responsive CSS clamp() value for fluid font sizes and spacing. Set min and max sizes plus viewport bounds and copy the result.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Base32 Encode
Base32 encode and decode text online using the standard RFC 4648 alphabet with proper padding. UTF-8 safe, fast and private in your browser.