Aspect ratio in CSS refers to an element’s proportional relationship between its width and height.

Two of the most common video aspect ratios are 4:3, which is the universal video format of the 20th century, and 16:9, which is the default for HD television and European digital television format such as YouTube.

What aspect ratio does is that it preserves an element’s initial proportions so that it can scale nicely across different media sizes. We call this type of feature or behaviour responsiveness.

Responsiveness means that elements are both flexible and keep their aspect ratios when resized.

Implement Aspect Ratio in CSS

For us to implement aspect ratio in CSS, we must use the padding hack feature.

What this means is that we must set a padding-top or padding-bottom property on an element with the calculated percentage value that represents the aspect ratio.

How to Calculate Aspect Ratio

For us to calculate the value for the padding property, we have to divide the ratio values and multiply the result by 100%.

So that means …

  • 16:9 aspect ratio will be 9 / 16 * 100% = 56.25%
  • 4:3 aspect ratio will be 3 / 4 * 100% = 75%
  • 1:1 aspect ratio will be 1 / 1 * 100% = 100%

Now, we apply this to our CSS.

  .aspect-ratio--16-9 {
      overflow: hidden;
      padding-top: 56.25%;
      background: red;
      }

Result

16:9 Aspect Ratio

We can do the same thing for videos as well …

We’ll have a div container with a video element

<div class="video-container">
  <video class="video" src="Sheep.mp4" controls />
</div>

We’ll add the following CSS

.video-container {
  position: relative;
  padding-top: 56.25%;
}

.video {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Result

Video by Matthias Groeneveld from Pixabay

CSS Aspect Ratio Property

Instead of using the padding hack, we can effectively use the aspect-ratio property, and it does exactly what padding-top or padding-bottom does.

.aspect-ratio-container {
  aspect-ratio: 16 / 9;
}

The box’s preferred aspect ratio is the specified ratio of width / height. If height and the preceding slash character are omitted, height defaults to 1.

Conclusion

Using the aspect ratio property in your web or software development design allows for responsiveness.

It will always scale along with the user’s viewport and maintain a consistent aspect ratio across all browsers.

Recent Posts

How to Dynamically Create, Update, and Delete HTML Elements

In modern web development, dynamically manipulating HTML elements is essential for creating interactive and responsive…

10 minutes ago

Why parseInt(’09’) Returns 0

If you've ever encountered the puzzling behavior of parseInt('09') returning 0 in JavaScript, you're not…

3 days ago

Event Bubbling and Capturing: Why Your Click Listener Fires Twice (And How to Fix It)

If you’ve ever built an interactive web application, you may have encountered a puzzling issue:…

2 weeks ago

Practical Array Methods for Everyday Coding

Arrays are the backbone of programming, used in nearly every application. Whether you're manipulating data,…

2 weeks ago

What the Heck Is the Event Loop? (Explained With Pizza Shop Analogies)

If you've ever tried to learn JavaScript, you’ve probably heard about the "Event Loop"—that mysterious,…

2 weeks ago

Why [] === [] Returns false in JavaScript (And How to Properly Compare Arrays & Objects)

JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you've…

2 weeks ago