Fixing an Aspect Ratio with aspect-ratio

In this lesson you'll learn how to fix an aspect ratio using aspect-ratio, so you can build a layout that doesn't fall apart even when the screen size changes. This is for people searching "CSS aspect-ratio usage."

Specifying aspect-ratio: width / height keeps an element's width-to-height ratio constant even as the screen size changes. This is handy when you want to keep a video or image frame at a clean ratio like "16:9."

The sample code specifies aspect-ratio: 16 / 9; on .box, combined with width: 100%; max-width: 300px;. Try changing the screen width and confirm how the aspect ratio always stays at 16:9 even as the element's width changes.

A common beginner stumbling block is the difference from the older technique (using a percentage padding trick). In the past, a more complex technique — calculating a padding percentage — was required, but now it can be specified simply, in one line. Referring to older articles can lead you to write something more complicated than necessary.

This is commonly used when building a responsive layout for thumbnails or card images, and it keeps the code clean. This property has also become the standard way to build the frame for an embedded video.