Published at
Updated at
Reading time

Today I came across Proportional Resizing with CSS Variables written by Ahmad Shadeed. He shares how to control element dimensions and aspect-ratios via CSS custom properties.

The post includes the following snippet:

.rect {
  --size: 10em;
  --aspect-ratio: 0.5625;
  width: var(--size);
  height: calc(var(--size) / var(--aspect-ratio));

The rect class-rule uses two custom properties to calculate the element height depending on --width and --aspect-ratio using calc.

This post was written when there was no support for the aspect-ratio CSS property. Before using the this article's "custom properties trick", check the aspect-ratio browser support.

How to use fallback values for custom properties

This snippet is already pretty smart. I see two areas that could be improved:

  • it only works with absolute dimensions
  • it hard codes the values in the CSS rule itself

What if we could create a container class providing default custom property values that can be overwritten and adjusted if needed? It could be a reusable and configurable CSS class (you might even say a component class ๐Ÿ™ˆ) that works out of the box.

The HTML could look like the following:

<!-- element using default aspect ratio -->
<div class="aspect-ratio-container"></div>
<!-- element using aspect ratio 2:1 -->
<div class="aspect-ratio-container" style="--width: 10em; --aspect-ratio: 0.5;"></div>
<!-- element using aspect ratio 1:1 -->
<div class="aspect-ratio-container" style="--width: 5em; --aspect-ratio: 1;"></div>

aspect-ratio-container defines default values (--width: 100%; --aspect-ratio: 0.5625;ย โ€“ 100% width and a 16:9 ratio) so that you can rely on a pre-defined aspect ratio. And if you need to, you can overwrite the default values with custom properties.

Container element with default value example

The CSS class including the fallback logic looks like this.

.aspect-ratio-container {
  /* define default values */  
  --w: var(--width, 100%);
  --ar: var(--aspect-ratio, 0.5625);

  width: var(--w);
  /* use padding-top because it is relative 
     to the element width in case percentages are used */
  padding: calc(var(--w) * var(--ar)) 0 0;
  border: 2px dashed #666;

  > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

I'm thinking a lot about this pattern. Having pre-defined custom properties to configure components makes a lot of sense in my opinion. I didn't wrap my head around it completely, though.

How configurable should classes become in the future? Could we formalize conventions around this pattern? If you have ideas or opinions on this topic, please share them with me. :)

To close this post; here's a quick CodePen to see the aspect-ratio-container class in action, and you can look at Ahmad's post, too.

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 3 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles