How to do the Aspect Ratio with CSS

2022-09-043 min
How to do the Aspect Ratio with CSS

What is the aspect ratio?

An aspect ratio is a proportional relationship between an element's width and height, like 1:1, 16:9, 4:3, etc.

How to set an aspect ratio to the element using CSS?

Let's try to reach a 16:9 aspect ratio in CSS with two different methods. In both examples, I will render the container within three boxes. Each box will have a dynamic width value, defined as 25%. Our task is to set a 16:9 aspect ratio for each box. To make this example a little bit difficult and point out possible issues, we will render a paragraph in each box.


CSS basics definition:

.container {
  align-items: center;
  background-color: #EEE;
  box-sizing: border-box;
  display: flex;
  height: 500px;
  justify-content: space-between;
  padding: 100px;
  width: 100%;

.box {
  background-color: #9E25FC;
  width: 25%;

Old method - Top padding:

In this example, we want to achieve desired height using calculated top padding. To achieve the 16/9 aspect ratio we need to calculate the top padding value.

25 * 9 / 16 = 14.625
.box--padding {
  position: relative;
  padding-top: 14.625%; /* 16:9 Aspect Ratio */

This method has one issue - To position box content, we need to use position: absolute because the combination of top padding and the size of elements inside the box enlarges the whole box height.


.box--padding p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;


How to define a 16:9 aspect ratio using the CSS aspect-ratio property?

I hope you read a "top padding" example so that you know it's not a straightforward solution. Now I'll show you a better option with the aspect-ratio property. First, I will use the ".container" definition we already made. Second, I will create a new box class, which defines its aspect ratio in a very simple and readable way.

.box--aspectratio {
  align-items: center;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;

That's it. To set the proper aspect ratio we simply use a single line of code - aspect-ratio: 16/9 . The rest is about adding a flexbox to center the content. We do not need additional paragraph styling with absolute positioning as we did for the first solution.

Aspect-ratio 1:1 - Height Equal to Width

To set aspect ratio using CSS aspect-ratio, you no longer calculate the top padding. All you need to do is set single property, like so:

aspect-ratio: 1 /* Aspect ratio 1:1 */

aspect-ratio support

I encourage you to check browser support before you use this property in your project. This is how the browser support looks like at the moment of creating this article.

  • Google chrome v88 or highter,
  • Firefox v89 or higher
  • Edge v88 or higher
  • Safari v15 or higher
  • aspect-ratio is supported also on few mobile browsers.
  • not supported on IE

Check enrire list of browser support here.