How to work with aspect ratios

Aspect ratio is the width-to-height ratio of a rectangle, and it shows up everywhere — 16:9 video, 4:3 photos, 1:1 social squares, 21:9 ultra-wide, 9:16 vertical video, the golden ratio in design. Getting it right means images don’t squish, videos don’t letterbox, and layouts don’t jump as images load. This guide covers the standard ratios, the CSS aspect-ratio property, responsive techniques, platform-specific requirements for social media and video, and the arithmetic you’ll use when resizing or cropping.

What a ratio actually is

A ratio is the relationship between two dimensions, written as w:h. It tells you proportion, not size.

16:9: 16 units wide for every 9 units tall. Could be 1920×1080, 1280×720, 640×360 — all 16:9.

Decimal form: 16/9 = 1.778. A single number describing the proportion.

To check if an image is a given ratio, divide width by height. If the result matches the ratio’s decimal form, you’re in.

The ratios you’ll encounter most

16:9 (1.778): HD video, YouTube, modern TVs, most monitors. The dominant ratio of the screen era.

4:3 (1.333): old TVs, old digital cameras, most tablets (iPad), print photographs.

1:1 (1.000): Instagram feed posts (historical default), album covers, app icons, profile pictures.

3:2 (1.500): DSLR photos, most printed prints. 35mm film. Still common in stock photography.

21:9 (2.333): ultra-wide monitors, some cinematic video.

9:16 (0.5625): vertical video — TikTok, Instagram Reels, YouTube Shorts, mobile phone portrait.

2:3 (0.667): vertical Instagram posts, Pinterest pins, e-book covers.

1.91:1 (1.910): Facebook/LinkedIn link preview, Open Graph images. Standard social-share dimension.

Golden ratio (1.618): occasionally used in print layouts; rarely enforced in web UI.

The CSS aspect-ratio property

Modern CSS has a dedicated property:

.card { aspect-ratio: 16 / 9; width: 100%; }

The element takes the full width, and the height is computed from the ratio. No padding hacks, no JS, widely supported since 2021.

Common uses:

aspect-ratio: 16 / 9; for video thumbnails and embeds.

aspect-ratio: 1; for square cards, avatars, product tiles.

aspect-ratio: 4 / 5; for portrait cards (Instagram feed images).

The padding-top hack (legacy)

Before aspect-ratio landed, the pattern was:

.wrapper { position: relative; padding-top: 56.25%; /* 9 / 16 × 100 */ } .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The padding-top in percent is relative to the parent width, which simulates aspect ratio. Hacky but worked everywhere.

When to still use it: supporting browsers older than 2021. Otherwise, use aspect-ratio.

Avoiding layout shift from images

Web Core Vitals penalize layout shifts. Images without explicit dimensions push content around when they load.

Solution: always provide width and height attributes on <img>, even when using responsive CSS.

<img src="photo.jpg" width="1600" height="900" alt="...">

Modern browsers use these to compute aspect ratio and reserve space before the image loads. Combined with style= "max-width: 100%; height: auto", you get responsive images with no layout shift.

Social media platform requirements

Instagram feed: square (1:1), portrait (4:5), or landscape (1.91:1). Anything outside these ranges gets cropped.

Instagram Stories & Reels: 9:16 vertical, 1080×1920 pixels.

TikTok: 9:16, 1080×1920.

YouTube video: 16:9, 1920×1080 (or higher).

YouTube Shorts: 9:16, 1080×1920.

Twitter/X feed image: 16:9 recommended; supports most ratios up to 1200×675.

Facebook/LinkedIn link preview (OG image):1200×630, 1.91:1 ratio.

Pinterest pin: 2:3 (1000×1500) for maximum visibility.

Cropping vs scaling

When an image doesn’t match a required ratio, you have two choices:

Scale (letterbox/pillarbox): preserve the whole image, add bars. Video players do this.

Crop: cut off edges. Preserves visual area but loses content. Instagram and Facebook do this for over-wide images.

object-fit in CSS:

object-fit: cover; — scale to fill, crop excess. Default for most card images.

object-fit: contain; — scale to fit, leave letterbox. Default for logos/icons.

object-fit: fill; — stretch to fit (usually wrong — distorts the image).

Computing a new size from ratio

Given one dimension, compute the other:

New height = new width × (ratio_h / ratio_w)

Example: 16:9 at 800px wide → height = 800 × (9/16) = 450px.

When cropping an image to a target ratio: calculate the target width and height that fit within the image, centered around the focal point.

Responsive ratios

Sometimes a single ratio across breakpoints looks wrong. Landscape cards on desktop might need to become square on mobile.

.card { aspect-ratio: 4 / 3; } @media (max-width: 640px) { .card { aspect-ratio: 1; } }

Or use CSS custom properties controlled by breakpoint for cleaner theming.

Common mistakes

Mixing decimal and ratio notation. aspect-ratio: 0.5625 and aspect-ratio: 9/16 are equivalent but mixing them in a codebase is confusing. Pick one.

Forgetting width/height on img tags. Causes layout shift and hurts Core Web Vitals.

Using fill instead of cover or contain. object-fit: fill stretches; almost always wrong for photos.

Not respecting platform ratio limits.Uploading a 21:9 image to Instagram wastes pixels — it gets cropped.

Hardcoding pixel dimensions instead of ratio.A 1200×800 card works until someone resizes the viewport. Define the ratio, let the browser compute the pixel size.

Run the numbers

Compute target dimensions instantly with the aspect ratio calculator. Pair with the image resizer to produce pixel-perfect resizes at your target ratio, and the image cropper when you need to match a specific platform crop.