Modern CSS & Video Composition Engine

Aspect Ratio Media Planner

Calculate pixel dimensions and aspect ratios for responsive video embeds, photos, and social posts. Generate modern CSS rules and inspect composition safe zones.

Standard Media Aspect Ratios

Aspect Ratio Proportion (W : H)

Ratio Width

Ratio Height

Decimal: 1.778:1Padding-bottom: 56.25%

Target Pixel Dimensions (px)

Width (px)

Height (px)

Interactive Framing Preview

Framing ratio 16:9 (1920 × 1080 px)

Rule of ThirdsTitle Safe Zone (90%)

16 : 9

1920 × 1080 px

Modern CSS (Recommended)

aspect-ratio: 16 / 9;

Tailwind: aspect-[16/9]

Legacy Padding-Bottom Trick

position: relative;
width: 100%;
padding-bottom: 56.25%; /* (9/16) * 100 */

Aspect Ratios in Modern Web & Video Media

Modern CSS aspect-ratio vs. The Padding Hack

Historically, maintaining an element's intrinsic aspect ratio before media loaded required the "padding-bottom trick". In CSS, percentage padding on a child element resolves against the width of its containing parent block.

For a 16:9 container, setting padding-bottom: 56.25% (9 ÷ 16 × 100) reserved vertical space to avoid Cumulative Layout Shift (CLS). Today, modern browsers support native aspect-ratio: 16 / 9;, completely eliminating container wrappers.

Platform Aspect Ratio Standards Cheat Sheet

16:9 (1.78:1): Global standard for YouTube video player, HDTV broadcasts, Zoom presentations, and web hero videos (1920×1080, 2560×1440, 3840×2160).
9:16 (0.56:1): Fullscreen vertical mobile format for TikTok, Instagram Reels, and YouTube Shorts (1080×1920).
4:5 (0.80:1): Maximum vertical height allowed in organic Instagram feed without letterboxing (1080×1350).
21:9 (2.33:1): Anamorphic widescreen and cinematic film presentation.