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, let’s find out what the aspect ratio is.

Aspect ratio is a proportional relationship between the width and height of an element. 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.

How to create a container element with a child element inside it?

<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:

How to style an element using a percentage value for the padding-top property

element {
  padding-top: 56.25%; /* Replace with your desired percentage */
}

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%

First, we’ll look at the two most common aspect ratio examples. Let’s start with the 4:3 aspect ratio. Here is the code:

4:3 Aspect Ratio CSS

.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>

Try it Yourself »

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

16:9 Aspect Ratio CSS

.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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

Finally, here is a useful trick. :) When set to a percentage, padding-top is (somewhat counterintuitively) relative to the width of the containing block. We can use this to our advantage. We can keep the aspect ratio of a block in a responsive design by using the ::after pseudo-element. For example, if you want a block to have an initial width of 300px and height of 150px, it will maintain that ratio even when resized responsively.

Here’s how we can do it:

An example of how to keep the aspect ratio of a block in a responsive design by using the ::after pseudo-element.

.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 maintain the aspect ratio of a div with content inside it?

To maintain the aspect ratio of a div with content inside it, you can use the CSS padding-top property 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>

Try it Yourself »

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.

Note on modern CSS: For contemporary projects, consider using the native aspect-ratio property (e.g., aspect-ratio: 16 / 9;). It is widely supported in modern browsers and eliminates the need for the padding-top hack, simplifying the markup and CSS significantly.