Aspect Ratio Guide — Common Ratios for Video, Images, and UI Design

Aspect ratio is the proportional relationship between width and height, expressed as width:height. A 16:9 ratio means for every 16 units wide, the content is 9 units tall. Understanding aspect ratios helps you size images, design video players, create responsive layouts, and avoid distortion when scaling content.

Use the Aspect Ratio Calculator to calculate dimensions from any ratio.

Common aspect ratios

Video and screens

Ratio	Decimal	Common name	Use case
16:9	1.778	Widescreen	HD/4K video, YouTube, presentations, most monitors
4:3	1.333	Standard	Old TVs, older web cams, medical displays
21:9	2.333	Ultrawide	Cinema, ultrawide monitors
2.39:1	2.39	Cinematic scope	Theatrical film (anamorphic)
1.85:1	1.85	Flat widescreen	Theatrical film
9:16	0.5625	Vertical	Mobile video, TikTok, Reels, Stories
1:1	1.0	Square	Instagram posts, profile photos
4:5	0.8	Portrait	Instagram portrait posts

Photography

Ratio	Notes
3:2	DSLR/mirrorless cameras (full-frame sensor), 35mm film
4:3	Micro Four Thirds cameras, old digital cameras
1:1	Square format (medium format film, Instagram)
5:4	Large format film (4×5 inch)
16:9	Modern phone video, some phones in photo mode

Web and UI design

Ratio	Use case
16:9	Hero images, video embeds, presentation slides
3:2	Blog thumbnails, article feature images
4:3	Product images, profile photos
1:1	Avatar images, gallery thumbnails
2:1	Wide banner images, Twitter card images
OG 1200×630	Open Graph meta image (~1.9:1)

Calculating dimensions from ratio

To find height from width and ratio:

height = width × (ratio height / ratio width)
height = width / decimal_ratio

Examples:

16:9 at width 1280px: height = 1280 × (9/16) = 720px
3:2  at width 1200px: height = 1200 × (2/3) = 800px
4:3  at width 800px:  height = 800 × (3/4) = 600px

To find width from height:

width = height × (ratio width / ratio height)
width = height × decimal_ratio

CSS aspect ratio implementation

Modern CSS (aspect-ratio property)

/* Maintain 16:9 ratio for a video container: */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Square element: */
.avatar {
  aspect-ratio: 1;  /* or 1/1 */
  width: 80px;
}

/* 4:3 image: */
.thumbnail {
  aspect-ratio: 4 / 3;
  width: 300px;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Scale to fill without distortion */
}

Responsive video embed (iframe)

Modern CSS makes this trivial:

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

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

The old padding-top hack (for older browsers):

/* Legacy: padding-top percentage trick */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 9/16 × 100% */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Image with aspect ratio

.card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Fill and crop */
  object-position: center;  /* Crop from center */
}

object-fit values:

• cover — fills the box, crops to maintain ratio
• contain — fits inside the box with letterboxing
• fill — stretches to fill (distorts)
• none — natural size, no scaling
• scale-down — like contain but won’t upscale

Aspect ratio in JavaScript

function calculateAspectRatio(width, height) {
  function gcd(a, b) {
    return b === 0 ? a : gcd(b, a % b);
  }
  const divisor = gcd(width, height);
  return `${width / divisor}:${height / divisor}`;
}

console.log(calculateAspectRatio(1920, 1080));  // "16:9"
console.log(calculateAspectRatio(1280, 720));   // "16:9"
console.log(calculateAspectRatio(800, 600));    // "4:3"
console.log(calculateAspectRatio(1200, 800));   // "3:2"

// Calculate dimensions from ratio:
function dimensionsFromRatio(ratio, knownDimension, isWidth = true) {
  const [w, h] = ratio.split(':').map(Number);
  if (isWidth) {
    return { width: knownDimension, height: Math.round(knownDimension * h / w) };
  } else {
    return { width: Math.round(knownDimension * w / h), height: knownDimension };
  }
}

console.log(dimensionsFromRatio('16:9', 1280));  // { width: 1280, height: 720 }
console.log(dimensionsFromRatio('3:2', 800));    // { width: 800, height: 533 }

Social media image sizes

Getting the aspect ratio right for social media prevents cropping:

Platform	Image type	Size	Ratio
Twitter/X	Summary card image	1200×628	~1.91:1
Twitter/X	Summary large image	1200×628	1.91:1
Facebook	Open Graph	1200×630	~1.9:1
Instagram	Square post	1080×1080	1:1
Instagram	Portrait post	1080×1350	4:5
Instagram	Landscape post	1080×566	~1.91:1
Instagram	Story/Reel	1080×1920	9:16
YouTube	Thumbnail	1280×720	16:9
LinkedIn	Post image	1200×627	~1.91:1

The “Open Graph” meta image standard (~1.9:1) is common across platforms for link previews.

Detecting and preserving aspect ratio in image uploads

async function getImageAspectRatio(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const { width, height } = img;
      function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); }
      const d = gcd(width, height);
      resolve({
        width,
        height,
        ratio: `${width/d}:${height/d}`,
        decimal: width / height
      });
      URL.revokeObjectURL(img.src);
    };
    img.src = URL.createObjectURL(file);
  });
}

const ratio = await getImageAspectRatio(fileInput.files[0]);
console.log(ratio);  // { width: 1920, height: 1080, ratio: '16:9', decimal: 1.777... }

Related tools

• Aspect Ratio Calculator — calculate dimensions from any ratio
• Aspect Ratio Calculator Guide — usage guide
• Responsive Grid Layout — responsive CSS grids