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
Aspect Ratio
Layout
Content
Design
Output
How to Use
1. Configure your aspect ratio by entering the width and height values (e.g. 16 and 9), or pick a preset ratio from the dropdown. 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.