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;
}

How to keep aspect ratio of a div with things in it?

To keep the aspect ratio of a div with content inside it, you can use the CSS property padding-top with a percentage value.

Here is an example:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 aspect ratio */
        background-color: #eee;
      }

      .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      h2 {
        margin-top: 10px;
        font-size: 24px;
      }

      p {
        margin-top: 10px;
        font-size: 16px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="content">
        <img src="https://picsum.photos/400/300" alt="Example Image" />
        <h2>Example Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo ac velit tincidunt lacinia. Quisque suscipit ultrices mauris, at laoreet augue hendrerit id.</p>
      </div>
    </div>
  </body>
</html>

In this example, we have a container div with a 16:9 aspect ratio. The padding-top property is set to 56.25% to maintain the aspect ratio. The content div inside it has position: absolute so that it can fill the entire container, and display: flex is used to center the content vertically and horizontally.

We also have an img tag inside the content with max-width: 100% to make sure it doesn't exceed the width of the container, and height: auto to maintain the aspect ratio of the image. Finally, we have some example text with different font sizes to show that the content can be whatever you want it to be.

This example creates a responsive container that maintains its aspect ratio even when the screen size changes, while still allowing for content to be added inside it.