CSSAwwwards
+ Submit tool
Built-in toolFree · No signup

CSS Aspect Ratio Helper

Generate CSS for maintaining fixed aspect ratios responsively. Get the modern aspect-ratio property (97%+ browser support) and the classic padding-bottom percentage hack for legacy targets. Includes 8 common ratio presets and a custom ratio input.

Custom ratio

:= 16:9 simplified · padding-bottom: 56.2500%
400px → height 225px

Preview — 16:9

16:9 — 400 × 225px
CSS Output
/* Modern approach — 97%+ browser support */.aspect-box {  aspect-ratio: 16 / 9;  width: 100%;} /* Legacy approach — padding-bottom hack */.aspect-box-legacy {  position: relative;  width: 100%;  padding-bottom: 56.2500%;  height: 0;  overflow: hidden;}.aspect-box-legacy > * {  position: absolute;  inset: 0;  width: 100%;  height: 100%;}

How to use

01

Pick a ratio

Choose from common ratios like 16:9 (video), 4:3 (classic TV), 1:1 (square), or enter a custom width:height.

02

Resize preview

Drag the width slider to see how the element maintains its ratio at different container sizes.

03

Choose approach

Modern aspect-ratio is clean and simple. Use the padding-bottom hack only if you need IE11 or very old browser support.

04

Copy CSS

Copy the complete CSS including both the modern and legacy approaches for maximum compatibility.

More CSS layout tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →