Aspect Ratio Calculator: Understanding Width-to-Height Ratios
Master aspect ratios for video, images, and responsive design. Calculate dimensions precisely for any screen or container.
Aspect ratio is the proportional relationship between width and height. 16:9 is the universal language of modern screens — HDTVs, YouTube, presentations, desktop wallpapers.
Understanding aspect ratios prevents the most common layout mistakes: stretched images, letterboxed video, and broken responsive containers. The CSS aspect-ratio property finally gives developers a clean way to enforce proportions without percentage tricks.
What is aspect ratio
An aspect ratio expresses the proportional relationship between width and height as two integers separated by a colon. 16:9 means for every 16 units of width, there are 9 units of height. The ratio is simplified to its lowest common denominator — 1920:1080 simplifies to 16:9. Aspect ratios are resolution-independent: a 16:9 video looks the same proportionally at 1280x720 or 3840x2160.
Free Tool Aspect Ratio Calculator Calculate dimensions and convert between aspect ratios instantlyCommon ratios (16:9, 4:3, 9:16, 1:1, 21:9)
16:9 (widescreen) is the standard for HD video and YouTube. 4:3 is the old television standard. 9:16 is portrait mobile — Instagram Stories, TikTok. 1:1 is square — Instagram feed posts. 21:9 is used for cinema and ultrawide monitors. 3:2 matches standard DSLR sensor proportions. 4:5 is popular on Instagram feed.
Calculating dimensions
To calculate height from width and ratio: height = width times (ratio_height / ratio_width). For 16:9 at 1280px wide: height = 1280 times (9/16) = 720px. To calculate width from height: width = height times (ratio_width / ratio_height). To simplify a ratio, find the GCD of width and height and divide both.
Free Tool CSS Unit Converter Convert between px, rem, em, vh, vw and moreCSS aspect-ratio property
The CSS aspect-ratio property enforces proportional sizing: aspect-ratio: 16 / 9 makes an element maintain a 16:9 ratio as its width changes. Combined with width: 100%, it creates a fully responsive container. Before aspect-ratio, the padding-top hack (padding-top: 56.25% for 16:9) was the standard approach.
Responsive images and videos
For responsive video embeds, wrap the iframe in a container with aspect-ratio: 16/9 and set width: 100%, height: auto on the iframe. For responsive images, use width: 100%; height: auto to maintain the original ratio. The aspect-ratio property is also useful for image placeholders that reserve layout space before images load.
Social media formats
Each platform has preferred ratios: Facebook feed 1.91:1, Facebook Story 9:16, Instagram feed 4:5 or 1:1, Instagram Story 9:16, Twitter/X 16:9 or 1:1, LinkedIn 1.91:1, TikTok 9:16, Pinterest 2:3, YouTube thumbnail 16:9.
Free Tool PX to REM Converter Convert pixel values to rem units for responsive design