CSS aspect-ratio Property — Maintain Proportions Without Padding Hacks

The CSS aspect-ratio property maintains an element’s width-to-height ratio automatically. It replaces the old padding-top percentage hack used to maintain ratios for videos and images.

Use the Aspect Ratio Calculator to calculate pixel dimensions for any ratio.

Basic syntax

.element {
  aspect-ratio: 16 / 9;    /* width:height = 16:9 */
  aspect-ratio: 1;          /* square (1:1) */
  aspect-ratio: 4 / 3;
  aspect-ratio: 2 / 1;      /* 2:1 */
}

The value is a ratio of width to height. You can use integers, decimals, or the slash notation.

How it works

The browser uses aspect-ratio to compute one dimension from the other:

.card {
  width: 300px;
  aspect-ratio: 16 / 9;
  /* height is automatically: 300 × (9/16) = 168.75px */
}

If both width and height are set explicitly, aspect-ratio is overridden.

16:9 responsive video

The old way (padding hack):

/* OLD: hack using padding-top */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 9/16 = 0.5625 */
}

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

The new way:

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

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

Common aspect ratios

/* Video formats: */
.widescreen  { aspect-ratio: 16 / 9; }   /* HD video, YouTube, Netflix */
.ultrawide   { aspect-ratio: 21 / 9; }   /* Cinema widescreen */
.standard    { aspect-ratio: 4 / 3; }    /* Old TV format */
.vertical    { aspect-ratio: 9 / 16; }   /* Mobile video, Reels */

/* Photo formats: */
.square      { aspect-ratio: 1; }         /* Instagram square */
.portrait    { aspect-ratio: 3 / 4; }    /* Portrait photography */
.landscape   { aspect-ratio: 3 / 2; }    /* DSLR landscape */
.panoramic   { aspect-ratio: 3 / 1; }    /* Wide panoramas */

/* Card layouts: */
.product-card { aspect-ratio: 2 / 3; }   /* Product photos */
.hero-banner  { aspect-ratio: 3 / 1; }   /* Hero images */

Images with aspect-ratio

Force images to maintain a ratio regardless of their natural dimensions:

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;        /* crop to fill, maintain ratio */
}

.profile-avatar {
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

object-fit: cover ensures the image fills the space without distortion.

Grid with consistent card heights

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* All images maintain 4:3 regardless of natural size */

aspect-ratio with max-height

The aspect-ratio can be overridden by explicit height constraints:

.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 600px;    /* cap the height on very wide screens */
}

On screens wider than 1067px (600 / (9/16)), the max-height kicks in and the ratio is no longer maintained.

Overflow behavior

By default, aspect-ratio doesn’t clip content. If content is taller than the ratio allows:

/* Content can overflow the ratio box: */
.card {
  aspect-ratio: 1;
  /* content can be taller than the card width */
}

/* To prevent overflow: */
.card {
  aspect-ratio: 1;
  overflow: hidden;
}

Browser support

aspect-ratio is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+). Global support is ~95%+. No polyfill needed.

For older browser fallback:

.video-wrapper {
  /* Fallback: */
  padding-top: 56.25%;
  position: relative;
}

/* Modern: */
@supports (aspect-ratio: 16 / 9) {
  .video-wrapper {
    padding-top: 0;
    aspect-ratio: 16 / 9;
  }
}

Related tools

• Aspect Ratio Calculator — calculate pixel dimensions
• Aspect Ratio Guide — common ratios and their uses
• CSS Grid Layout Guide — grid-based layouts