How to Maintain the Aspect Ratio with CSS

Sometimes developers want to add a <div> element, that can change its width/height as the window width changes. That can be done by maintaining the aspect ratio of the element. First of all, let’s find out what is the aspect ratio?

Aspect ratio is an image projection attribute, which determines the proportional relationship between the width of an image and its height. Two widely used video aspect ratios are 4:3 (the universal video format of the 20th century) and 16:9 (universal for HD television and European digital television).

In this snippet, we'll learn how to maintain the aspect ratio of an element by using only CSS.

Create HTML

You need to use an element that will serve as a container, just like the <div> element. If you want to have a text inside of it, you need to add a child element as well.

<div class="container">
  <div class="text">
    Some text  <!-- You can place your text here -->
  </div>
</div>

Add CSS

If you want to maintain the aspect ratio of your div, you must add a percentage value for the padding-top property, like this:

element {
  padding-top: %value;
}

Different aspect ratios have different percentage values.

Some of them are presented here:

Aspect ratio Padding-top value
1:1 100%
16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%

Firstly we’ll have a look at the two most common aspect ratio examples. Let’s start with the 4:3 aspect ratio. This is how the code looks like:

.container {
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

Example of maintaining the 4:3 aspect ratio:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 75%;/* 4:3 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2>Aspect Ratio 4:3</h2>
    <p>Resize the window to see the effect.</p>
    <div class="container">
      <div class="text">4:3 Aspect ratio</div>
    </div>
  </body>
</html>

Now let’s see an example of the second most used aspect ratio, which is 16:9. Here is the code:

.container {
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

Example of maintaining the 16:9 aspect ratio:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 56.25%;/* 16:9 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2> Aspect Ratio 16:9</h2>
    <p>Resize the window to see the effect.</p>
    <div class="container">
      <div class="text">16:9 Aspect ratio</div>
    </div>
  </body>
</html>

Now let’s see some other Aspect ratio examples.

Example of maintaining the 1:1 aspect ratio:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 100%;/* 1:1 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2> Aspect Ratio 1:1</h2>
    <p>Resize the window to see the effect.</p>
    <div class="container">
      <div class="text">1:1 Aspect ratio</div>
    </div>
  </body>
</html>

Example of maintaining the 3:2 aspect ratio:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 66.66%;/* 3:2 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2> Aspect Ratio 3:2</h2>
    <p>Resize the window to see the effect.</p>
    <div class="container">
      <div class="text">3:2 Aspect ratio</div>
    </div>
  </body>
</html>

Example of maintaining the 8:5 aspect ratio:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 62.5%;/* 8:5 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2> Aspect Ratio 8:5</h2>
    <p>Resize the window to see the effect.</p>
    <div class="container">
      <div class="text">8:5 Aspect ratio</div>
    </div>
  </body>
</html>

And for the end we have a little trick. :) The padding-top, when set to a percentage, is (somewhat counterintuitive) relative to the width of the containing block and we can use that to our advantage. We can keep the aspect ratio of a block in a responsive design by using the ::after pseudo-element. For example, let's say you want a block to have initially 300px width and 150px height, and if the design pushes it to be smaller (e.g., a responsive rule) it keeps the same ratio as before.

Here’s how we can do it:

.same-ratio {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.same-ratio::after {
  content: '';
  display: block;
  /* how much is the height compared to the width (%) */
  padding-top: 50%;
}

/* Any content needs to position absolute to not interfere with the ratio*/
.same-ratio-content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
Do you find this helpful?

Related articles