What is an aspect ratio?

An aspect ratio is the proportional relationship between an element's width and height, expressed as two numbers separated by a colon (e.g., 16:9 or 4:3). It describes the shape of a rectangle — a 16:9 ratio means the width is 16 units for every 9 units of height. Aspect ratios are fundamental in video, photography, screen design, and responsive web development.

How is aspect ratio calculated?

Aspect ratio is calculated by dividing both dimensions by their Greatest Common Divisor (GCD). For example, 1920×1080: GCD(1920, 1080) = 120, so 1920÷120 = 16 and 1080÷120 = 9, giving 16:9. To find a missing dimension, multiply the known dimension by the ratio: new_height = width × (ratio_height / ratio_width).

What are the most common aspect ratios?

16:9 is the standard for widescreen video and most modern monitors. 4:3 was the standard for older TVs and monitors (still used in some photography). 1:1 is square format, popular on Instagram. 21:9 is ultrawide cinematic format. 9:16 is portrait orientation, used for vertical video and Stories. 3:4 is traditional portrait photography format.

What is the CSS aspect-ratio property?

The CSS `aspect-ratio` property sets a preferred aspect ratio for an element. Example: `aspect-ratio: 16 / 9` makes an element maintain 16:9 proportions when only one dimension is specified. This eliminates the old "padding-top hack" for responsive embeds. Supported in all modern browsers since 2021.

How do I maintain aspect ratio when resizing images in CSS?

Use `object-fit: cover` or `object-fit: contain` on elements inside a fixed-size container. Alternatively, use `aspect-ratio: 16/9; width: 100%;` directly on the img or container. For background images, use `background-size: cover` with a `padding-top` percentage technique (legacy) or the aspect-ratio property (modern).

What aspect ratio should I use for social media?

Common social media aspect ratios: Instagram feed = 1:1 (square) or 4:5 (portrait). Instagram/TikTok Stories/Reels = 9:16. YouTube = 16:9. Twitter/X images = 16:9 (landscape). Facebook post = 1.91:1 (landscape). Pinterest = 2:3 (portrait). LinkedIn = 1.91:1. When in doubt, 16:9 works for most platforms.

What is the difference between aspect ratio and resolution?

Resolution refers to the actual pixel dimensions (e.g., 1920×1080). Aspect ratio is the proportional relationship, independent of size (e.g., 16:9). Multiple resolutions can share the same aspect ratio: 1280×720, 1920×1080, and 3840×2160 all have a 16:9 aspect ratio despite different resolutions.

Aspect Ratio

Calculate and maintain aspect ratios for images, videos and screens.

Auto-calculateCommon presetsLock ratio

① Enter width and height ② Or pick a preset ratio ③ Copy the CSS

Standard

Social

Custom ratio:

Width (px)

Height (px)

16:9

Aspect ratio

16:9

Dimensions

1920×1080

Decimal ratio

1.7778

CSS Output

aspect-ratio: 16 / 9;
padding-top: 56.2500%; /* legacy fallback */
width: 1920px;
height: 1080px;

Continue with

▸Px to RemConvert CSS units 64Base64 ToolEncode & decode ↓SVG to PNGConvert vector files

What is aspect ratio and why does it matter?

The aspect ratio is the proportional relationship between an element's width and height, expressed as W:H — for example 16:9, 4:3, 1:1, or 9:16. It is fundamental to video production, photography, responsive web design, and UI layout. Modern CSS enforces ratios with the aspect-ratio property (e.g., aspect-ratio: 16 / 9), replacing the old padding-top hack (padding-top: 56.25%). Common use cases: YouTube thumbnails (1280×720, 16:9), Instagram posts (1080×1080, 1:1), TikTok and Stories (1080×1920, 9:16), Open Graph images (1200×630, ~1.91:1), LinkedIn banners (1200×627). This calculator covers standard presets, social media presets, custom ratio input, locked proportions, and instant CSS output.

Frequently asked questions

Aspect ratio is the proportional relationship between an element's width and its height, expressed as W:H. Common ratios include 16:9 (widescreen video), 4:3 (traditional TV/monitor), 1:1 (square), 21:9 (ultrawide), and 9:16 (vertical video for mobile).

To find the height from width and ratio: height = width × (ratio height ÷ ratio width). To find the width: width = height × (ratio width ÷ ratio height). Example: for 16:9 at 1920px wide → height = 1920 × (9 ÷ 16) = 1080px.

16:9 is the standard for widescreen video (HD, Full HD, 4K), most modern monitors, laptop screens, and YouTube thumbnails. It replaced the older 4:3 ratio as the broadcast standard in the early 2000s. 1920×1080 (1080p) and 3840×2160 (4K) are both 16:9.

Modern CSS: use the aspect-ratio property: `aspect-ratio: 16 / 9`. For older browsers: use the padding-top trick: `padding-top: 56.25%` (9/16 × 100) on a relative container with absolutely positioned content inside.

Aspect ratio is a proportional relationship (dimensionless ratio like 16:9). Resolution is the actual pixel count (1920×1080). Many different resolutions can share the same aspect ratio: 1280×720, 1920×1080, and 3840×2160 are all 16:9.

In HTML5, use the width and height attributes on <img> to define the intrinsic ratio, preventing layout shift (CLS). Add max-width: 100%; height: auto in CSS. For background images, use background-size: cover and aspect-ratio or the padding-top trick on the container.

Facebook/Instagram post: 1:1 (1080×1080). Instagram Story/Reels/TikTok: 9:16 (1080×1920). Twitter/X header: 3:1 (1500×500). LinkedIn banner: ~1.91:1 (1200×627). YouTube thumbnail: 16:9 (1280×720). Open Graph image: ~1.91:1 (1200×630).

What is aspect ratio and why does it matter?

Frequently asked questions

Explore Our Network