How to define element aspect-ratios with CSS custom properties (#note)

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.

Edit: some day the aspect-ratio CSS property will allow us to define element aspect ratios without workarounds and hacks, but at the time of writing the browser support of aspect-ratio is not existing.

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.

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.