CSS Aspect Ratio: Responsive Images, Videos, and Embeds

The Problem: Layout Shift

When a browser loads an image without knowing its dimensions, it initially allocates 0×0 space. Once the image loads, the browser recalculates layout — causing the page to jump. This is Cumulative Layout Shift (CLS), a Core Web Vitals metric that hurts both UX and SEO.

The Modern Solution: aspect-ratio

/* Reserve space before image loads */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Square */
.avatar {
  aspect-ratio: 1;  /* = 1 / 1 */
  width: 64px;
}

/* Classic video ratios */
.video-container { aspect-ratio: 16 / 9; }
.wide-screen      { aspect-ratio: 21 / 9; }
.photo            { aspect-ratio: 4 / 3; }
.portrait         { aspect-ratio: 3 / 4; }

HTML width and height Attributes

The most reliable way to prevent layout shift for images is setting explicit width and height in HTML. Modern browsers use these to calculate the intrinsic aspect ratio before the image loads:

<img
  src="photo.webp"
  width="1200"
  height="675"
  alt="Photo description"
  loading="lazy"
>
<!-- Browser reserves 1200×675 space immediately -->
<!-- Then CSS can make it responsive: -->
<style>
  img { width: 100%; height: auto; }
</style>

Responsive Video Embeds

/* Modern approach */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* The old padding-top hack (still works but unnecessary with aspect-ratio) */
.video-wrapper-legacy {
  position: relative;
  padding-top: 56.25%;  /* 9/16 = 56.25% */
  height: 0;
}
.video-wrapper-legacy iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

Object-Fit for Images in Fixed Containers

/* Fill a fixed aspect-ratio box without distortion */
.card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fill, cropping if needed */
  object-position: center; /* focus point */
}

/* object-fit values:
  cover    — fills container, crops to fit (most common for thumbnails)
  contain  — fits inside container, shows letterbox/pillarbox
  fill     — stretches to fill (distorts if aspect ratios differ)
  none     — original size, clips to container
  scale-down — whichever of none/contain is smaller */

Calculating Proportional Dimensions

// Maintain aspect ratio when resizing
function maintainRatio(originalWidth, originalHeight, newWidth) {
  return Math.round((newWidth / originalWidth) * originalHeight);
}

maintainRatio(1920, 1080, 800);  // 450 — 800×450 maintains 16:9

Calculate Aspect Ratios Instantly

Use ToolsVito's Aspect Ratio Calculator to find the missing dimension when resizing images or videos while maintaining proportions.