Keeping an embedded video, image placeholder, or map at a fixed aspect ratio regardless of its container's width used to require a padding-percentage trick, but the modern CSS aspect-ratio property makes it a single clean line of code.
Pick a common ratio like 16:9 for video or 1:1 for a square, and this tool generates the exact CSS along with a live preview showing the box at that proportion, ready to copy into your stylesheet.
This is useful for building responsive video embeds, image galleries with consistent proportions, or any placeholder box that needs to scale while keeping its shape locked.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this conversion or calculation often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Because there's no sign-up or installation step, you can jump straight from search result to working tool in a couple of seconds.
Frequently asked questions
Do all browsers support the aspect-ratio property?
Yes, the CSS aspect-ratio property is supported in all current major browsers; for very old browser support you'd need the older padding-percentage trick instead.
Can I use a custom ratio not in the list?
The generated CSS pattern (aspect-ratio: width / height) works with any two numbers — swap in your own ratio directly in the copied CSS if needed.