How to maintain aspect ratio

Learn how to use CSS to maintain the aspect ratio of elements.

How to Implement - Height equals Width

Step 1 - Add HTML:

Use container elements such as <div>If you want to include text within it, add a child element:

<div class="container">
  <div class="text">Some text</div> <!-- If you want text inside the container -->
</div>

Step 2 - Add CSS:

for padding-top Add percentage values to maintain the aspect ratio of the DIV. The following example will create a DIV with a 1:1 aspect ratio (height and width are always equal):

Example - 1:1 Aspect Ratio

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside */
}
/* If you want text inside the container */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Try it yourself

Other Aspect Ratios

Example - 16:9 Aspect Ratio

.container {
  padding-top: 56.25%; /* 16:9 Aspect Ratio (9 divided by 16 equals 0.5625) */
}

Try it yourself

Example - 4:3 Aspect Ratio

.container {
  padding-top: 75%; /* 4:3 Aspect Ratio (3 divided by 4 equals 0.75) */
}

Try it yourself

Example - 3:2 Aspect Ratio

.container {
  padding-top: 66.66%; /* 3:2 Aspect Ratio (2 divided by 3 equals 0.6666) */
}

Try it yourself

Example - 8:5 Aspect Ratio

.container {
  padding-top: 62.5%; /* 8:5 Aspect Ratio (5 divided by 8 equals 0.625) */
}

Try it yourself

CSS aspect-ratio attribute

In newer browsers, you can simply use CSS aspect-ratio Property:

Example - 3:2 Aspect Ratio

.container {
  aspect-ratio: 3 / 2;
}

Try it yourself

The numbers in the table indicate the first browser version that fully supports this attribute.