aspect-ratio replaces the padding-top hack for responsive boxes

Maintaining a responsive element with a fixed aspect ratio (e.g. 16:9 video container) required the fragile padding-top percentage hack and absolute positioning of child content.

Use the native aspect-ratio property:

/* Modern approach */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.square-card {
  width: 200px;
  aspect-ratio: 1; /* shorthand for 1 / 1 */
}

/* Old padding hack — no longer needed */
/* .video-container {
  position: relative;
  padding-top: 56.25%; /* 9/16 = 0.5625 */
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
} */

The padding-top hack exploited the fact that percentage padding is relative to the element's width. aspect-ratio is a proper CSS property that achieves the same result with far less code and no need for absolute positioning.

Responsive media embeds, cards, or any element that must maintain a fixed width-to-height ratio.