Maintaining Aspect Ratio, Revisited
We finally have aspect-ratio
.
Extra
This is not an in-depth look on how it is done, because Stephanie Eckles already wrote about aspect-ratio (and beyond) on Smashing Magazine, way better than I ever could.
The thing is, an article I wrote in 2018 on how to (mis)use CSS Grid to maintain aspect ratio to this day ranks high in popularity on this site. But now that aspect-ratio
has excellent browser support, I want to make clear that we no longer need any hack, we can finally do this with one line of CSS:
.box {
aspect-ratio: 16 / 9; /* for boxes with 16:9 aspect ratio */
}
In other words, I created this article and the accompanying CodePen so I could link to it in the 2018 article.