Aspect RatioCalculator

Reference / Cheat Sheet

Aspect Ratio Cheat Sheet: Every Ratio, Every Platform, Every CSS Value

All the aspect ratio values you need in one place — pixel dimensions, CSS code, platform specs, and print sizes. Bookmark this page.

Published: June 1, 2025Updated: May 16, 20265 min read
ReferenceSocial MediaCSS

Quick Jump

Jump to Section

Last updated: Q1 2025

This page is built for repeat lookup, not linear reading. Jump straight to the ratio table, platform specs, video resolutions, print guidance, CSS code, or conversion math.

Core Table

Common Aspect Ratios — Decimal Values & CSS

Every common aspect ratio with its decimal value, modern aspect-ratio syntax, and legacy padding-top value.

RatioAliasDecimalCSS aspect-ratioCSS padding-topShape
1:1Square1.0000aspect-ratio: 1 / 1;100%
4:3Classic / SD1.3333aspect-ratio: 4 / 3;75%
3:2Photo / 35mm1.5000aspect-ratio: 3 / 2;66.67%
16:10Laptop1.6000aspect-ratio: 16 / 10;62.5%
5:31.6667aspect-ratio: 5 / 3;60%
16:9Widescreen / HD1.7778aspect-ratio: 16 / 9;56.25%
2:1Univisium2.0000aspect-ratio: 2 / 1;50%
21:9Ultrawide2.3333aspect-ratio: 21 / 9;42.86%
2.39:1CinemaScope2.3900aspect-ratio: 239 / 100;41.84%
3:1Panorama3.0000aspect-ratio: 3 / 1;33.33%
4:1Banner4.0000aspect-ratio: 4 / 1;25%
4:5Instagram Portrait0.8000aspect-ratio: 4 / 5;125%
2:3Portrait Print0.6667aspect-ratio: 2 / 3;150%
9:16Vertical Video0.5625aspect-ratio: 9 / 16;177.78%
9:19.5iPhone0.4615aspect-ratio: 9 / 19.5;216.67%

Key Insight

The legacy formula is simple: (height ÷ width) × 100%. For 16:9, that becomes (9 ÷ 16) × 100 = 56.25%.

The old padding hack still matters when you need a ratio container that works in browsers without native aspect-ratio support.

Tool CTA

Need a ratio that is not listed here? Enter any two dimensions into the Aspect Ratio Calculator to get the exact decimal and CSS values.
Open Aspect Ratio Calculator

Core Table

Social Media Aspect Ratio Specs — 2025

Official recommended ratios and pixel dimensions for every major platform and content type. Updated for 2025.

IG

Instagram

Three feed ratios plus vertical full-screen formats.

Content TypeRatioRecommended SizeMinimum SizeNotes
Feed Post (Square)1:11080 × 1080320 × 320Safest general-purpose choice
Feed Post (Portrait)4:51080 × 1350320 × 400Largest feed footprint, recommended
Feed Post (Landscape)1.91:11080 × 566320 × 167Best for wide imagery
Stories9:161080 × 1920500 × 889Full-screen vertical canvas
Reels9:161080 × 1920Matches Stories
Profile Photo1:1320 × 320110 × 110Displayed as a circle
TT

TikTok

One native format dominates: 9:16.

Content TypeRatioRecommended SizeMinimum SizeNotes
Video (Primary)9:161080 × 1920Native full-screen vertical
Video (Landscape)16:91920 × 1080Shows letterbox, not recommended
Video (Square)1:11080 × 1080Shows letterbox, not recommended
Profile Photo1:1200 × 200Square source image
YT

YouTube

Horizontal video plus Shorts and thumbnails.

Content TypeRatioRecommended SizeMinimum SizeNotes
Video16:91920 × 1080 / 3840 × 2160Standard horizontal video
Shorts9:161080 × 1920Vertical short-form video
Thumbnail16:91280 × 720640 × 360Matches the player
Channel Art16:92560 × 1440Safe zone: 1546 × 423
Profile Photo1:1800 × 800Displayed as a circle
FB

Facebook

Link-preview landscape, cover-photo oddity, and Stories.

Content TypeRatioRecommended SizeMinimum SizeNotes
Feed Photo1.91:11200 × 630Typical link-preview logic
Feed Video16:91280 × 720Default horizontal video
Stories9:161080 × 1920Full-screen vertical
Cover Photo2.7:1820 × 312Desktop display ratio
Profile Photo1:1170 × 170Desktop display size
X

Twitter / X

16:9 feed media and ultra-wide headers.

Content TypeRatioRecommended SizeMinimum SizeNotes
In-stream Photo16:91600 × 900Best landscape preview
In-stream Video16:91280 × 720Maximum 1920 × 1200
Header Image3:11500 × 500Banner image
Profile Photo1:1400 × 400Displayed as a circle
IN

LinkedIn

Landscape posts and extremely wide cover assets.

Content TypeRatioRecommended SizeMinimum SizeNotes
Post Image1.91:11200 × 627Feed landscape default
Post Video16:91920 × 1080Horizontal video default
Cover Photo4:11584 × 396Personal profile banner
Company Logo1:1300 × 300Square brand mark
Profile Photo1:1400 × 400Square source image
PT

Pinterest

Tall pins remain the native default.

Content TypeRatioRecommended SizeMinimum SizeNotes
Standard Pin2:31000 × 1500Best-performing vertical default
Square Pin1:11000 × 1000Fallback for simple layouts
Long Pin1:2.11000 × 2100Maximum height guidance
Story Pin9:161080 × 1920Full-screen vertical

Platform Specs Change

Platform specs change. This table reflects official recommendations as of Q1 2025. Always verify with the platform's official help center before a major campaign launch.

Core Table

Video Resolutions by Aspect Ratio

Standard video resolutions organized by aspect ratio, from 480p to 8K.

Resolution NameRatioWidth × HeightTotal PixelsPrimary Use
480p SD4:3640 × 480307,200Legacy formats / low bandwidth
480p Wide16:9854 × 480409,920Older widescreen delivery
720p HD16:91280 × 720921,600Baseline HD
1080p FHD16:91920 × 10802,073,600Most common standard HD
1080p Vertical9:161080 × 19202,073,600TikTok / Reels / Shorts
1440p QHD16:92560 × 14403,686,400High-end monitors
4K UHD16:93840 × 21608,294,4004K video / streaming
4K Vertical9:162160 × 38408,294,4004K vertical video
4K DCI17:94096 × 21608,847,360Digital cinema
8K UHD16:97680 × 432033,177,6008K video
Square HD1:11080 × 10801,166,400Instagram square feed
Instagram Portrait4:51080 × 13501,458,000Instagram portrait feed

Key Insight

1920 × 1080 and 1080 × 1920 contain exactly the same number of pixels: 2,073,600.

Aspect ratio does not change pixel count by itself. It changes how those pixels are arranged: wide and short, or narrow and tall.

Developer Reference

CSS Aspect Ratio Code Snippets

Copy-paste CSS for the most common ratios, both the modern aspect-ratio property and the legacy padding-top method.

Modern CSS aspect-ratio (recommended)

/* Modern CSS aspect-ratio (recommended) *//* 16:9 — YouTube, TV, Widescreen */.ratio-16-9 { aspect-ratio: 16 / 9; width: 100%; }/* 9:16 — TikTok, Reels, Shorts */.ratio-9-16 { aspect-ratio: 9 / 16; width: 100%; max-width: 400px; }/* 4:3 — Classic, iPad, Zoom */.ratio-4-3  { aspect-ratio: 4 / 3;  width: 100%; }/* 1:1 — Square, Profile Photos */.ratio-1-1  { aspect-ratio: 1 / 1;  width: 100%; }/* 4:5 — Instagram Portrait */.ratio-4-5  { aspect-ratio: 4 / 5;  width: 100%; max-width: 500px; }/* 3:2 — Photography, 4×6 Print */.ratio-3-2  { aspect-ratio: 3 / 2;  width: 100%; }/* 21:9 — Ultrawide, Cinematic */.ratio-21-9 { aspect-ratio: 21 / 9; width: 100%; }/* 2:3 — Portrait Print, Pinterest */.ratio-2-3  { aspect-ratio: 2 / 3;  width: 100%; max-width: 400px; }

Legacy padding-top method

/* Legacy padding-top method *//* Formula: padding-top = (height ÷ width) × 100% */.ratio-legacy {  position: relative;  width: 100%;}.ratio-legacy > * {  position: absolute;  inset: 0;  width: 100%;  height: 100%;}/* 16:9  → padding-top: 56.25%  (9÷16×100)   *//* 9:16  → padding-top: 177.78% (16÷9×100)   *//* 4:3   → padding-top: 75%     (3÷4×100)    *//* 1:1   → padding-top: 100%    (1÷1×100)    *//* 4:5   → padding-top: 125%    (5÷4×100)    *//* 3:2   → padding-top: 66.67%  (2÷3×100)    *//* 21:9  → padding-top: 42.86%  (9÷21×100)   *//* 2:3   → padding-top: 150%    (3÷2×100)    *//* 3:1   → padding-top: 33.33%  (1÷3×100)    *//* 4:1   → padding-top: 25%     (1÷4×100)    */

Responsive video embed (YouTube / Vimeo)

/* Responsive video embed (YouTube / Vimeo) */.video-wrapper {  position: relative;  width: 100%;  aspect-ratio: 16 / 9;}@supports not (aspect-ratio: 16/9) {  .video-wrapper {    padding-top: 56.25%;  }  .video-wrapper > iframe {    position: absolute;    inset: 0;  }}.video-wrapper > iframe {  width: 100%;  height: 100%;  border: none;}

Tool CTA

Need CSS for a custom ratio? Use the CSS Generator to get a complete responsive container snippet.
Open CSS Generator

Conversion Reference

Aspect Ratio Conversion Loss Reference

When you convert content from one ratio to another by cropping, you lose pixels. This table shows how much content is lost in the most common center-crop conversions.

SourceTargetCrop DirectionLossRetainedExample Crop Output
16:99:16Crop left and right-68.4% width31.6% width1920 × 1080 → 608 × 1080
16:91:1Crop left and right-43.75% width56.25% width1920 × 1080 → 1080 × 1080
16:94:5Crop left and right-55.0% width45.0% width1920 × 1080 → 864 × 1080
16:94:3Crop left and right-25.0% width75.0% width1920 × 1080 → 1440 × 1080
9:1616:9Crop top and bottom-68.4% height31.6% height1080 × 1920 → 1080 × 608
9:161:1Crop top and bottom-43.75% height56.25% height1080 × 1920 → 1080 × 1080
4:316:9Crop top and bottom-25.0% height75.0% height1440 × 1080 → 1440 × 810
4:31:1Crop left and right-25.0% width75.0% width1440 × 1080 → 1080 × 1080
3:24:5Crop left and right-46.67% width53.33% width1620 × 1080 → 864 × 1080
3:21:1Crop left and right-33.33% width66.67% width1620 × 1080 → 1080 × 1080

Conversion Pitfall

All loss percentages here assume a center crop. If you use letterbox or pillarbox instead, you keep all content but introduce empty bars.

For social content, black bars usually perform worse than native-ratio assets. The best solution is to plan the safe zone while shooting, especially for 16:9 to 9:16 workflows.

Tool CTA

Need the exact cropped pixel dimensions for a custom conversion? Use the Aspect Ratio Calculator to compute the output precisely.
Open Aspect Ratio Calculator

Bookmark Hook

Quick Reference Card

The screenshot-friendly summary card for the ratios people actually reach for. It is designed to stay legible on mobile, in screenshots, and in print.

Aspect ratio quick reference cardA dark, screenshot-friendly cheat card listing ten common aspect ratios with decimal values, representative resolutions, CSS values, and platform cues.ASPECT RATIO QUICK REFERENCEDecimal values, representative resolutions, CSS, and platform cues in one screenshot.RatioDecimalResolutionCSSPlatform1:11.00001080×10801/1Instagram, avatars4:31.33331440×10804/3iPad, Zoom3:21.50001620×10803/2DSLR, 4×6 print16:91.77781920×108016/9YouTube, TV21:92.33332520×108021/9Ultrawide4:50.80001080×13504/5IG portrait2:30.66671000×15002/3Pinterest9:160.56251080×19209/16TikTok, Reels3:13.00001500×5003/1X header4:14.00001584×3964/1LinkedIn bannerpadding-top = (height ÷ width) × 100%9:16 native = 1080×1920 · 16:9 native = 1920×1080aspectratiocalculator.proScreenshot-friendly reference card for creators and developers.
Ten common ratios, one dark-card summary. The watermark stays subtle in-product but readable in screenshots.

FAQ

Frequently Asked Questions

What is the most common aspect ratio for social media?

It depends on the platform and content type. For feed posts, 4:5 maximizes screen space on Instagram. For Stories, Reels, TikTok, and Shorts, 9:16 is the standard. For YouTube and LinkedIn, 16:9 is standard. For profile photos across all platforms, 1:1 is universal.

What aspect ratio should I use for YouTube thumbnails?

YouTube thumbnails should be 16:9 at 1280×720 pixels, with a minimum of 640×360. That matches the YouTube player so the thumbnail displays without cropping or black bars. JPG and PNG both work, with a 2 MB maximum file size.

What is the CSS padding-top value for 16:9?

The CSS padding-top value for a 16:9 container is 56.25%. The formula is height divided by width, then multiplied by 100: 9 ÷ 16 × 100 = 56.25. In modern CSS you should prefer `aspect-ratio: 16 / 9;`, but the padding-top method remains useful for legacy browser support.

Which aspect ratio loses the least content when converting to 9:16?

Among the common source formats in this cheat sheet, 4:5 loses the least content when center-cropped to 9:16, keeping about 70.3% of its original width and losing about 29.7%. A 1:1 crop keeps 56.25% of width. A 16:9 crop keeps only 31.6%. If you need to publish to both 16:9 and 9:16, shoot in 4K 16:9 and keep the subject in the center third of the frame.

What aspect ratio is 1080×1080?

1080×1080 is a 1:1 square ratio. The width and height are equal, so the greatest common divisor is 1080, and both values reduce to 1. This is the standard size for Instagram square feed posts and profile-photo source files.

Related Guides

Related Guides

Use these tools and companion guides when you need to move from a quick lookup into deeper ratio decisions, platform-specific specs, or CSS generation.