aspect-ratio: Controlling Proportions Without Padding Hacks
The padding-bottom hack for fluid video embeds is finally obsolete. The aspect-ratio property does it cleanly. Here is how I use it. For years, the only way to create a box with a fixed aspect ratio in CSS was the padding-bottom hack: set padding-bottom to a percentage, position the content absolutely inside, and hope nothing broke. It was fragile, unintuitive, and impossible to combine with explicit heights. The aspect-ratio property replaces all of that with a single declaration. I want to share how I use it in production and the patterns that have replaced the old hacks. The project that sold me on aspect-ratio was a video gallery. Each video thumbnail needed to maintain a 16:9 ratio regardless of the container width. The old padding-bottom hack required a wrapper div, absolute positioning, and careful overflow management. With aspect-ratio, it was one property on the img element. No wrapper, no positioning, no hacks. The Basics aspect-ratio sets the ratio of width to height. An element with aspect-ratio: 16 / 9 and a width of 320px automatically gets a height of 180px. The property works on any element, not just media. .video-embed { aspect-ratio:…