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.
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.
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 …
9 / 16 * 100% = 56.25%
3 / 4 * 100% = 75%
1 / 1 * 100% = 100%
Now, we apply this to our CSS.
.aspect-ratio--16-9 {
overflow: hidden;
padding-top: 56.25%;
background: red;
}
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;
}
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
.
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.
When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…
When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…
When starting a JavaScript project, one of the first decisions you’ll face is: Should I…
Software development is one of the most valuable skills you can learn. From building websites…
In JavaScript, arrays are used to store multiple values in a single variable. While JavaScript…
Containerization is a lightweight form of virtualization that packages an application and its dependencies into…