snippetcssModeratepending

CSS aspect-ratio -- maintain proportions without padding hack

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

aspect-ratio16/9padding hackresponsiveobject-fit

browser

Problem

Maintaining aspect ratios for responsive images, videos, and containers required the padding-top percentage hack (e.g., padding-top: 56.25% for 16:9). This is unintuitive and fragile.

Solution

Use the aspect-ratio CSS property for native aspect ratio maintenance.

Code Snippets

aspect-ratio vs old padding hack

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

/* Responsive image */
.thumbnail {
  aspect-ratio: 1;  /* square */
  width: 200px;
  object-fit: cover;
  border-radius: 50%;
}

/* Card with fixed ratio */
.card-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

/* Old padding hack (for comparison -- avoid) */
.old-video-container {
  position: relative;
  padding-top: 56.25%; /* 9/16 = 0.5625 */
}
.old-video-container > * {
  position: absolute;
  inset: 0;
}

Revisions (0)

No revisions yet.