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.

Share on X LinkedIn

Custom ratio

:= 16:9 simplified · padding-bottom: 56.2500%

Preview width400px → 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%;}

Was this tool helpful?

How to use

Pick a ratio

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

Resize preview

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

Choose approach

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

Copy CSS

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