Runs locally — nothing is uploaded
Result
Enter a width and a height.
How to use
- 1Enter the original width and height, for example 1920 and 1080.
- 2Enter a new width (or height) to get the matching other side.
- 3Copy the CSS aspect-ratio value or pick a size from the table.
Both sides are divided by their greatest common divisor: 1920×1080 becomes 16:9. Sizes like 1366×768 do not reduce to small numbers, so the nearest common ratio is shown as well.
Before the CSS aspect-ratio property, boxes kept their shape with padding-top as a percentage of the width. All current browsers support aspect-ratio, so the padding hack is only for very old ones.
16:9 for video and screens, 4:3 and 3:2 for photos, 1:1 and 4:5 for social posts, 9:16 for stories and reels, 1.91:1 for link preview images.
Related tools
Contrast checkerWCAG AA/AAA contrast ratio, plus APCAColor converterHEX, RGB, HSL, OKLCH and CMYK in one goPalette generatorOKLCH color scales and harmoniesType scaleModular font sizes with a live previewCSS clamp() generatorFluid sizes between two viewport widthsPX to REM converterBatch px ⇄ rem for any root size
Let's make something good
Tell us about your project — we reply within one business day.