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.

Share:

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.