In this article, we discuss how to add responsive aspect ratios to divs using CSS variables. The following code is super smart and allows you to use CSS variables in style attributes on specific divs to give them a fixed aspect ratio. For example, if you're trying to make a squared if remain square regardless of what the viewport width is, this method is perfect for that.

If you have a 16 by 9 video that you want to display on your website, placing it within a 16 by 9 div , that responds to the width of the screen but keeps its aspect ratio intact is perfect.

First, here's a video tutorial on how to achieve responsive aspect ratios on divs.

If you find video content helpful, please subscribe!

The coolest thing about this is that you just need to install the following CSS on your global stylesheet, and then you can use the style attribute and the custom CSS variable anywhere on your website too quickly and easily add a responsive aspect ratio to a div. First, here's a quick example of a responsive square div with content inside of it.

Examples

Note, that the the aspect ratio is set to die if the content inside it needs more room to not overflow. This could be disabled if you'd like.

Here's another example of a responsive 16 by 9 div with a (random) background image that has dimensions of 1600 pixels by 900 pixels. Try resizing the browser viewport, and you'll notice that the actual width and height of the elements skills up and down, though the aspect ratio remains standard.

This effect is done by using the code below. First, we’ll show the code, and talk about how it works. Finally, will discuss how to install this custom CSS code on your website and use it on specific elements to set up aspect ratios. This will work on relatively any website, using any CMS, under any browser.

It should be noted that we grabbed this code from this CSS Tricks Article (and they grabbed the code from a now defunct blog). But because we use it in virtually every single one of our web design projects, we figured we'd share it with you here.

The CSS Code To Make Responsive Aspect Ratios For Divs

The element that should have the specific aspect ratio looks something like this:

/*For a responsive square div*/
<div style="--aspect-ratio:1/1;">
</div>

/*For a 16 by 9 aspect ratio div*/
<div style="--aspect-ratio:16/9;">
</div>

/*You can also specify them like this too:*/
/*For a 16 by 9 aspect ratio div*/
<div style="--aspect-ratio:16/9;">
</div>

<div style="--aspect-ratio:1282/1091;">
</div>Code language: PHP (php)

The css code that creates and applies the aspect ratio looks something like this:

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}Code language: CSS (css)

How The Code Works

If you've been around the block, and are a seasoned website creator, you'll know that the best way to set up aspect ratios on divs is by using the padding top or padding bottom method. In essence, that's exactly what the code above does, except it uses the custom CSS variable which allows you to specify whatever aspect ratio you want directly on and element (using the style attribute).

If you'd like to complete explanation on how this works, quoted directly from the creator himself, check out the CSS tricks article where we sourced it from.

To summarize,

The code identifies that the element has the custom CSS variable applied to it via the style attribute. It reads the desired aspect ratio, and then generates the necessary height based on the current width of the screen using CSS calculations. It takes that height, and using a pseudo element before, applies the height as a padding top. This makes it so you can have content within the div that has the fixed aspect ratio.

Again, to set your aspect ratio, all you need to do is enter the desired ratio as a style attribute, using the following format:

Once the CSS code is installed on your website, you can do this to any div that you want, and the code will find it and apply the necessary rules to it.

This is a perfect method if you're trying to set up responsive square divs, or keep an aspect ratio the same regardless of the screen size. Because it's 100% responsive, you don't need to worry about setting a fixed width and height for multiple viewport sizes using media queries.

Again, the code calculates the necessary height based on the width of the element and the width and height of the viewport to keep it at a fixed ratio.

Conclusion

We definitely recommend you try it out, because it's a really cool feature that's actually quite useful in many applications. For example, if you have a 16 by 9 video, as we mentioned in the introduction of this article, wrapping it in this device will ensure that there's always enough space for it. Keeping these fixed aspect ratios is a great way to ensure that there will be no cumulative layout shifts, as we discuss in another article titled Eliminate CLS With Aspect Ratio Divs Wrapping Your Images And Videos.