CSS Aspect Ratio Calculator

Calculate and preview CSS aspect-ratio values with common presets and responsive container sizing.

Developer & Code

This tool is being rebuilt

The earlier version did not work as described, so it is switched off until a tested version replaces it at this same address.

Tell us what you need it for

Tools that work today

CSS Aspect Ratio Box Generator Generate responsive aspect ratio containers using the aspect-ratio property or padding hack technique.
CSS Container Query Playground Experiment with CSS container queries by resizing containers and seeing responsive style changes.
Responsive Image Srcset Generator Build responsive image srcset and sizes attributes for optimal image delivery across screen sizes.

Web app by bee2.io

SCOUTb2

Website quality scanner

A Chrome extension that crawls a website and reports the accessibility, performance, and search problems it finds, page by page, with a shareable...

Open SCOUTb2

App by bee2.io

SundryKit

Everyday toolbox

A pocket toolbox of small offline utilities, each keeping its own saved lists, boards, and projects.

More Developer & Code tools

JSON Schema Validator Every error at its exact path, by the real rules.
CONTRIBUTING.md Generator Every command in it is one your project runs.
Changelog Generator from Git Log From commits to a checked changelog and version.
Commit Message Builder and Checker Proposed from the diff, checked against the spec.
README Generator from Your Project Your manifest, your scripts, your README.
AST Explorer Click the code, see the node; click the node, see the code.

What is it about?

What's missing Something isn't working Could be better Another tool I need Other

Your message (required)

0 / 2000 characters, at least 10

Name (optional)

Email (optional, for a reply)

Leave this field empty

Sent with your message: the address of this page, b2kit.com/tools/css-aspect-ratio-calculator/

Pressing Send gives your message and this page's address to bee2.io, the team behind b2KIT. Your name and email go along only if you enter them, and any reply goes to that email. How we handle feedback

Sent. Thank you.

This tool is being rebuilt

Help improve this tool Tell us what is missing, broken or worth adding. One minute.