CSS Aspect Ratio Calculator
The CSS Aspect Ratio Calculator generates production-ready Bootstrap 5 HTML for responsive containers locked to any aspect ratio, 16:9, 4:3, 1:1, or custom. Enter your width and height values, configure styling options, and get a complete, copy-paste HTML snippet that uses CSS aspect-ratio with a proper fallback using the padding-top trick. Built for frontend developers, designers, and anyone embedding video, maps, or images who needs pixel-perfect ratio control without hunting for magic percentages.
Configuration
How to Use
1. Pick a preset aspect ratio from the dropdown, or choose Custom and enter the width and height values (e.g. 16 and 9). 2. Adjust the container width, background color, border radius, and optional inner content label to match your project's design. 3. Preview the rendered HTML output, the container will display with the correct locked ratio and your chosen styling. 4. Copy the HTML snippet or download it and drop it directly into your Bootstrap 5 project.
Why Use This Tool?
Calculating the correct padding-top percentage for a given aspect ratio (height ÷ width × 100) is a small but error-prone step that breaks responsive layouts when wrong. This tool does the math instantly, wraps it in a cross-browser Bootstrap 5 snippet with both modern aspect-ratio CSS and the padding-top fallback, and lets you skip the documentation lookup entirely. No libraries, no signup, no dependencies beyond Bootstrap 5.
Frequently Asked Questions
What is the CSS Aspect Ratio Calculator?
It's a free online tool that calculates the correct CSS values to lock any HTML container to a specific width-to-height ratio, then outputs a ready-to-use Bootstrap 5 HTML block you can paste directly into your project.
When should I use the padding-top trick vs the CSS aspect-ratio property?
The modern <code>aspect-ratio</code> CSS property (e.g. <code>aspect-ratio: 16 / 9</code>) works in all browsers released after 2021 and is the cleanest approach. The padding-top trick (setting <code>padding-top: 56.25%</code> on a relative-positioned parent with an absolute-positioned child) is the legacy fallback that works in older browsers including IE11. This tool outputs both techniques together: <code>aspect-ratio</code> is applied directly, and the matching <code>padding-top</code> fallback sits inside an <code>@supports not (aspect-ratio: 1 / 1)</code> block, so older browsers such as Safari 14 pick it up automatically.
Is it free?
Yes, the CSS Aspect Ratio Calculator is completely free with no signup required. Built by the Canvas Builder team.
Stop tweaking snippets. Build the whole site
This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.