Aspect Ratios for Video and Web: A Complete Reference

An aspect ratio is the proportional relationship between width and height. It is expressed as two numbers separated by a colon — for example, 16:9 means for every 16 units of width, there are 9 units of height.

Aspect ratios are fundamental to video production, photography, web design, and any visual medium where dimensions matter. Using the correct aspect ratio ensures your content displays properly across different devices and platforms without unwanted cropping or black bars.

16:9 (Widescreen): The standard for HD and 4K video, YouTube, streaming services, and most modern displays. At 1080p resolution, this is 1920×1080 pixels. At 4K, it is 3840×2160.

9:16 (Vertical): The standard for TikTok, Instagram Reels, YouTube Shorts, and mobile-first video. At 1080p, this is 1080×1920 pixels. It is simply 16:9 rotated 90 degrees.

4:3 (Standard): Legacy TV format and some presentation formats (PowerPoint defaults). At 1024×768 or 1440×1080. Still used in some corporate and educational contexts.

21:9 (Ultrawide): Cinematic widescreen format for movies and ultrawide monitors. Common resolutions include 2560×1080 and 3440×1440.

Instagram Feed: 1:1 (square) for standard posts, 4:5 (portrait) for maximum vertical space. The platform supports various ratios but these maximize screen real estate.

Instagram Stories/Reels: 9:16 (1080×1920). Full-screen vertical video.

TikTok: 9:16 (1080×1920). Vertical video is required for the main feed.

YouTube: 16:9 for standard videos, 9:16 for Shorts. YouTube also supports 4:3 and 1:1 but will add letterboxing.

Twitter/X: 16:9 for video, 2:1 for link preview cards, various ratios for images.

LinkedIn: 1.91:1 for link previews, 16:9 for video, 1:1 or 4:5 for feed images.

Modern CSS provides the `aspect-ratio` property for maintaining proportions in responsive layouts:

```css .video-container { aspect-ratio: 16 / 9; width: 100%; } ```

This is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+). For older browser support, use the padding-top hack:

```css .video-container { position: relative; padding-top: 56.25%; /* 9/16 × 100% */ } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ```

To find a missing dimension from a known aspect ratio:

Find height from width: Height = Width × (Ratio Height / Ratio Width) Example: 1920 × (9/16) = 1080

Find width from height: Width = Height × (Ratio Width / Ratio Height) Example: 1080 × (16/9) = 1920

Find aspect ratio from dimensions: Divide both by their greatest common divisor (GCD), or express as a decimal ratio. Example: 1200×630 → 1200/630 ≈ 1.905:1 (close to 2:1)

The Aspect Ratio Calculator automates these calculations and includes common presets for quick reference.

Match the platform: Always check the recommended aspect ratio for your target platform. Using the wrong ratio results in cropping or letterboxing.

Design for mobile first: With over 60% of video consumption on mobile, consider how your content looks in vertical (9:16) and square (1:1) formats.

Use safe zones: Keep important content away from edges, as platforms may crop or overlay UI elements. A 10% margin from edges is a good rule of thumb.

Export at the correct resolution: Higher resolution within the same aspect ratio improves quality. For 16:9, prefer 1920×1080 or 3840×2160 over 1280×720.

Consider responsive images: Use the `srcset` and `sizes` attributes in HTML, or CSS `object-fit`, to serve appropriately sized images for different viewport widths while maintaining aspect ratios.