CSS Aspect Ratio Boxes

Maintain consistent aspect ratios for media containers using CSS aspect-ratio property without padding hacks.

CssData FetchingUpdated: 2025-01-15

Code

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

.square {
  aspect-ratio: 1;
}

.portrait {
  aspect-ratio: 3 / 4;
}

Report a problem with this exampleOpens a pre-filled issue on GitHub.