Aspect Ratio Calculator
Find the width or height for any aspect ratio, or work out the ratio of a size. Video and social presets, with CSS. Free and private.
Result
- Size
1280 × 720 px - Ratio of this size
16:9 - As a decimal
1.7778 - CSS
aspect-ratio: 16 / 9;
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Free Online Aspect Ratio Calculator
Choose a ratio, type a width or a height, and get the other side. Or enter a size and see its ratio in simple form, with the CSS line ready to copy. It gives developers a quick browser-based way to solve a focused aspect ratio calculator task before moving the result into a project.
How to find a height from a width
Pick a preset such as 16:9 (or type your own ratio), then type the width. The height appears. Type a height and the width updates instead.
How to find the ratio of a size
Type the width and the height. The simplest ratio is shown below, for example 1920 × 1080 is 16:9.
Common mistakes
- Resizing only one side of an image: it stretches. Always change the other side by the same ratio.
- Mixing 16:9 (width:height) with 9:16 (portrait): the order is width first.
Frequently asked questions
How do I resize without stretching?
Pick the ratio of the original, type the new width and the height is worked out for you. The ratio of 1920 × 1080 is 16:9, so a width of 1280 gives a height of 720.
What ratio should I use for social media?
Instagram posts are 1:1 or 4:5, Stories and Reels are 9:16, YouTube videos are 16:9 and link previews are about 1.91:1. The presets list them.
What is the CSS aspect-ratio property?
aspect-ratio: 16 / 9 keeps an element at that shape as its width changes, with no padding tricks. All modern browsers support it.
Why is my height a whole number?
Pixel sizes are rounded to the nearest whole pixel, so the result may differ from the exact ratio by less than half a pixel.
How do I use this aspect ratio calculator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.
More Frontend & Design
User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back