CSS aspect-ratio Guide: Say Goodbye to the Padding Hack

The Era of "Padding-Top" is Over

In the field, creating a responsive card grid often means enforcing uniform image proportions—like a strict 16:9 or 1:1 ratio. Before modern CSS, achieving this fluidly meant relying on a bizarre workaround known as the "padding hack."

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Magic number for 16:9 (9 ÷ 16) */
}
.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This trick leveraged the fact that percentage-based vertical padding is calculated based on the element's width. We had to create a fake empty box and absolutely position the actual content inside it. It worked, but it was tedious and completely unintuitive.

Today, the aspect-ratio property solves this entirely.

The Basics: One Line to Rule Proportions

The syntax is exactly what you would expect. You just provide the ratio as width / height.

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #fca5a5;
}

In Practice: Pair it with object-fit

In a real project, you rarely deal with perfectly cropped images. When users upload random photos into your CMS, you need to constrain them without squishing or stretching the subject.

To do this, always pair aspect-ratio directly on the <img> tag with object-fit: cover;.

.card-thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* Prevents distortion, acts like background-size: cover */
  border-radius: 8px;
}