CSS Aspect Ratio

A presentation at Web Directions hover by Anton Ball

Have you needed to maintain an aspect ratio in a layout? Perhaps 16:9 for a video or a 4:3 photograph. Was it more work than you would have thought? There’s JavaScript solutions or the Padding-Top hack that work, but there are sacrifices to these workarounds.

The frustration of maintaining a consistent width-height ratio is about to be solved with modern browsers supporting the CSS Aspect Ratio property. In this talk we look at what aspect ratio is, how we can use it in our code and the problems it’ll solve.