Aspect Ratio Calculator
Find the missing dimension based on your selected aspect ratio. Use shortcuts: Ctrl+C (dimensions), Ctrl+R (ratio), Ctrl+Shift+S (CSS)
Examples
Compute the height for a 1920px-wide 16:9 video
ratio: 16:9
width: 19201920x10801080 = round(1920 × 9 / 16). The CSS value `aspect-ratio: 16 / 9;` is available alongside the dimensions.
Compute the width for a 1080px-tall 4:5 portrait
ratio: 4:5
height: 1080864x1080864 = round(1080 × 4 / 5). 4:5 is the ratio Instagram portrait posts (1080×1350) are a multiple of.
Compute a 9:16 vertical video size
ratio: 9:16
width: 10801080x19201080×1920 is the standard vertical-video resolution for Instagram Stories, TikTok and YouTube Shorts.
About this tool
An aspect ratio expresses the proportional relationship between an image or video's width and height, written as width:height (for example 16:9 for HD video or 4:5 for Instagram portrait posts). The Aspect Ratio Calculator lets you pin any one dimension and a ratio, and it computes the missing dimension in pixels, plus a CSS-ready `aspect-ratio` value you can paste into a stylesheet.
The default view holds a single ratio and tracks the width and height together — typing into either input rewrites the other to keep the proportion. A preset dropdown offers the eight most common ratios (16:9, 4:3, 1:1, 21:9, 9:16, 3:2, 5:4, 2:3), and a preset grid gives one-click access to popular fixed resolutions such as Full HD (1920×1080), 4K UHD (3840×2160), Instagram portrait (1080×1350) and QHD (2560×1440).
Three copy targets cover the cases you reach for most: the dimensions (e.g. `1920x1080`), the bare ratio (e.g. `16:9`) and the CSS rule (`aspect-ratio: 16 / 9;`). Keyboard shortcuts (⌘/Ctrl-C, ⌘/Ctrl-R, ⌘/Ctrl-Shift-S) copy each one without leaving the keyboard.
How to use
Pick a ratio or a preset
Choose 16:9, 4:5, 9:16 or another common ratio from the dropdown, or click a preset card (Full HD, 4K UHD, Square, etc.) to load its dimensions and ratio in one step.
Type one dimension
Enter either width or height in pixels. The other dimension is computed automatically to keep the ratio, and a live preview box redraws to show the proportions.
Copy the value you need
Copy `1920x1080`, `16:9`, or `aspect-ratio: 16 / 9;` for your design tool, code editor, or social-media export. Use the keyboard shortcuts for a no-mouse workflow.
Validate a media asset
Paste a captured width and height, then read off the simplified ratio to confirm a clip or photo matches the target format (for example 1920×1080 simplifies to 16:9).
Use cases
Sizing responsive image containers
Pick the target ratio (16:9, 4:5, 1:1) and copy `aspect-ratio: <w> / <h>;` directly into a stylesheet to lock the container before the image loads.
Resizing videos for social platforms
Convert a 1920×1080 master into the 1080×1920 (9:16) or 1080×1350 (4:5) variant that each platform actually expects.
Checking whether an asset matches a target format
Paste an exported image's dimensions and confirm the simplified ratio equals the platform's required 16:9, 4:3 or 1:1.
Computing thumbnail grids
Lock 16:9 and pick a card width (e.g. 320px) to find the matching height (180px) when designing a uniform thumbnail layout.
Common mistakes
Mistake:Assuming the calculated dimensions are exact multiples of the ratio.
Fix:The calculator rounds the missing dimension with Math.round, so for very small widths the result can be off by a pixel — round-tripping width→height→width is not always identity.
Mistake:Confusing 4:5 with 5:4 for Instagram.
Fix:Instagram portrait is 4:5 (taller than wide), so width 1080 gives height 1350. 5:4 is the inverse landscape ratio used for large-format photography.
Mistake:Treating 'Full HD' and '16:9' as interchangeable.
Fix:'Full HD' is the fixed resolution 1920×1080; 16:9 is the proportional relationship. Many resolutions share 16:9 (1280×720, 3840×2160, 2560×1440), so pick the preset only when the actual pixel count matters.
Mistake:Forgetting the slash in the CSS value.
Fix:Modern CSS requires `aspect-ratio: 16 / 9;` (with the slash and spaces) for ratios — the legacy `aspect-ratio: 16/9` works in some browsers but the canonical form is the one copied by the tool.
Frequently asked questions
Related guides
References & standards
Related tools
Border Radius Generator
Visually craft CSS border-radius values — including the advanced 8-value slash syntax for organic blob shapes — with a live preview and one-click copy.
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
Dummy Avatar Generator
Generate unique SVG avatars for mockups and placeholders using various illustration styles
Flexbox Playground
Visually configure a CSS flexbox container — set direction, alignment, wrap and gap, see a live preview, and copy production-ready CSS.