Maintaining aspect ratio using CSS
There are some great CSS properties that are being rolled out across browsers. Some of which I had the opportunity to present at our company Front-End Guilds. The properties which I presented were aspect-ratio, content-visibility, scroll-behavior and scroll-margin-top. This article will focus on the aspect-ratio property.
NOTE: At the time of writing this article, aspect-ratio is only supported on Chromium browsers. To see which browsers the property is currently supported, visit https://caniuse.com/mdn-css_properties_aspect-ratio.
The “padding-top hack”
We’ve all used it or at least know of it, the infamous padding-top hack which has been used for many years in order to get media (namely videos) to automatically resize and keep their aspect ratio. The padding-top hack is where the top padding is given a percentage value to set the height of an element which represents and achieves the desired aspect ratio. For example;
- 1:1 aspect ratio would be set to padding-top: 100% (1/1 = 1)
- 4:3 aspect ratio would be set to padding-top: 75% (3/4 = 0.75)
- 16:9 aspect ratio would be set to padding-top: 56.25% (16/9 = 0.5625)
Let’s say we wanted to set the aspect ratio of a video to 16:9, we would write:
Quite a lot of CSS code to achieve something which seems quite simple. With the aspect-ratio property, we can now shun the above hack and achieve the same result with the following:
Neat right? With the aspect-ratio property, all we need is the width or height and then the property does the rest. It works out and sets the width and/or height of the element according to the aspect ratio value given (4:3 would be 4/3, 16:9 would be 16/9 etc.).
Here are a couple of codepen examples;
- Image: https://codepen.io/miteshsevani/pen/mdOKzPQ
- Video: https://codepen.io/miteshsevani/pen/eYBKLyY
Browser compatibility
As mentioned earlier, there are still some browsers that do not support the aspect-ratio property, the above example can be altered to support these browsers by using the feature query @supports:
Aspect ratio and Cumulative Layout Shift
Performance metrics (see web vitals) of a website will now have a larger impact on search engine optimisation (SEO). Google have said that Core Web Vitals will be a consideration when ranking search results.
One of the great effects of the aspect-ratio property is the positive impact on layout and visual stability (see Cumulative Layout Shift). When a browser is rendering a page, especially on slow connections, the layout of a page can shift as it loads content, especially if the content is loaded client-side.
For example, let’s say we have a video at the top of our page. Before using aspect ratio to size the video, by the time it has been loaded and rendered, it would have caused the layout of the page to shift. This is because the browser would not be aware of how much space the video will require and therefore will not reserve the space required. Instead, it will shift the content to create the space when the video is ready to be displayed.
In contrast, by using the aspect-ratio property on the container, the browser will be able to work out the space required for the video and will reserve that space, avoiding the shift in the layout of the page.
Note: Layout and visual stability were also achieved with the padding-top hack, the aspect-ratio property just makes it simpler.
Conclusion
At The Telegraph, we certainly have a few areas where we can benefit from using the aspect-ratio property. One of these being for our videos, especially on our new long read articles and the other being for our lead/hero images and videos on articles.
For our videos, we use a 16:9 aspect ratio and are currently using the padding-top hack to achieve the correct resizing. Certainly a good candidate for refactoring our CSS to use the aspect-ratio property instead.
The other being our lead/hero images and videos on our articles which causes a layout shift and is negatively impacting the performance. Although we have improved this by adding the size attributes to the image, it can be improved further by using aspect-ratio which the browser can use to reserve the space required for the image.
Mitesh Sevani is a Senior Software Engineer at The Telegraph.
