Introduction

The aspect-ratio CSS property is a relatively simple property that solves many problems with responsive design in CSS. In this quick article I will explain everything you need to know about this property (including many lesser known features).

aspect-ratio Basics

aspect-ratio is a simple CSS property that lets you force any element to stay at a specific aspect ratio no matter what size it grows to. It is defined by putting the desired width ratio followed by a / and then the desired height ratio. For example, if you want an element to always be a 16:9 aspect ratio, you would use aspect-ratio: 16 / 9;.

.element {
  aspect-ratio: 16 / 9;
  background-color: blue;
  width: 50%;
}

The only thing you need to be aware of is that at least one dimension (width or height) must be an auto based size. This is pretty self explanatory, though, since if you specify a hard coded width and height, the aspect-ratio proprety would do nothing.

.element {
  /* Doesn't work */
  aspect-ratio: 16 / 9;
  background-color: red;
  width: 100px;
  height: 100px;
}

By default if both sizes are set to auto, the aspect-ratio will change the height to match the aspect ratio and let the width be whatever auto size is.

.element {
  aspect-ratio: 3 / 1;
  background-color: blue;
  width: auto;
  height: auto;
}

aspect-ratio Advanced Features

The basic use case of aspect-ratio will cover 90% of your use cases, but there are a few additional ways you can use this property that you should know about. The first is that this property can actually be defined without specifying a height ratio. If you only specify a width ratio, the height ratio will default to 1.

.element {
  /* Same as 2 / 1 */
  aspect-ratio: 2;
  background-color: blue;
  width: 50%;
}

Another interesting thing with aspect-ratio is you can specify a value of auto alongside your aspect ratio which will do interesting things with elements such as videos and images which need to be loaded in. While the image/video is loading, the element will be the aspect ratio you specified, but once the image/video is loaded, the element will adjust to the aspect ratio of the image/video.

.element {
  aspect-ratio: auto 16 / 9;
  background-color: blue;
}

Assumming the image itself has an aspect ratio of 1:1.

This is useful if you want to have a placeholder for an image or video that is loading, but then have the element adjust to the actual aspect ratio of the image/video once it is loaded.

Conclusion

The aspect-ratio CSS property is a simple property, but it has tons of use cases (especially around responsive design). Also, it is available in all major browsers so you can use it today without any issues.