Having a consistent ratio between the width and height of images and other responsive elements is important. In CSS, we used the padding hack for many years, but now we have native aspect ratio support in CSS.

In this article, I will discuss what is aspect ratio, how we used to do it, what’s the new way of doing it. Of course, there will be use cases with a proper fallback for them.

Let’s dive in!

Introduction: What Is Aspect Ratio?

In mathematics, a ratio indicates how many times one number contains another. For example, if there are eight oranges and six lemons in a bowl of fruit, then the ratio of oranges to lemons is eight to six (that is, 8∶6, which is equivalent to the ratio 4∶3).

In web design, the concept of aspect ratio is used to describe that an image’s width & height should be resized proportionally to each other.

Consider the following figure.

We have a ratio of 4:3. Which shows that the ratio of apple to grape is four to three.

In other words, the smallest box we can create for an aspect ratio of 4:3 is a 4px*3px box. When this box height is resized proportionally to its width, we will have a box that respects its aspect ratio.

Consider the following figure.

The box is being resized proportionally, and the ratio between its width and height is consistent. Now, let’s imagine that the box contains an important image that we care about all of its details.

Notice that the image details are preserved, no matter what’s the size. By having a consistent aspect ratio, we can get the following benefits:

• Imagery across a website will be consistent across different viewport sizes.
• Important details are preserved.
• We can have responsive video elements, too.
• It helps in creating a clear guide for image sizes by designers, so developers can handle them in the development process.

Measuring Aspect Ratio

To measure the aspect ratio, we need to divide the width by the height as in the following figure.

The ratio between the width and height is 1.33. That means this ratio should be respected. Consider the following:

Notice on the image on the right, the value of width ÷ height is 1.02, which is not what the original aspect ratio is (1.33 or 4:3).

You might be thinking, how to come up with the value 4:3? Well, this is called the Nearest Normal Aspect Ratio and there are tools that can help us in finding it. While working on a UI design, it’s highly recommended to know exactly what’s the aspect ratio of the images you are using. Using this calculator can help in that.

With that, I hope that the concept of aspect ratio is clear for you now. If you already know about it, then I hope that you refreshed your knowledge about it.

Implementing Aspect-Ratio In CSS

We used to implement aspect-ratio by using percentage padding in CSS. The good news is that recently, we got native support for aspect-ratio in all major browsers. Before diving into the native way, I will explain the good old way first.

#article #css #frame rate