Create different aspect ratio div with CSS

Modern deisgn wants to have boxes of different aspect ratios to render the media properly, for example, Instagram has 1:1 square box grid, while Youtube uses 16:9 box to view the videos, on the mobile devices we have 4:3 or 8:5.

In this article, we will see how we can create different aspect ratio div with CSS.

Using aspect-ratio CSS property

The most straightforward way is by using the aspect-ratio CSS property that works in all the modern browsers. This creates box of different aspect-ratio, all you have to do is define the width and the height will be adjusted.

<div class="container">
    <div class="box">
      <div class="text">1:1 Aspect ratio</div> 
    </div>
</div>

.container {
  background-color: #e91e63;
  position: relative;
  width: calc((100% / 3) - 2px);
}

.box{
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}

Using padding-top CSS property

If you want to support older browser and they would like to use the padding-top CSS property to create different aspect-ratio div.

For the padding-top, you can use this mathematical calculation, h/(w/100), to determine the percentage to aspect-ratio and vice versa.

For example, in the 16:9 ratio, 16 is width and 9 is height, putting that in the formula, we get 9 / (16 / 100) = 9 / 0.16 = 56.25%.

<div class="container">
    <div class="box">
      <div class="text">1:1 Aspect ratio</div> 
    </div>
</div>

.container {
  background-color: #e91e63;
  position: relative;
  width: calc((100% / 3) - 2px);
}

.box{
  position: relative;
  width: 100%;
  padding-top: 100%;
}

Here is a list of the common ones aspect-ratio to padding-top percentage conversion.