CSS Aspect Ratio

Jan 25, 2021
Design, Html, Css
Share on Twitter

Aspect ratio is an interesting problem. How do you tackle it with CSS? Especially if you don't know the dimensions you're dealing with. CSS has a new property on the way to deal with this. We'll give this a very quick look. And then, let's take a look at other ways you can handle this that currently have better browser support.

aspect-ratio permalink

CSS has a new property on the way. It's for prescribing aspect ratio to an element 🙌

And it's as straightforward as

          .element {
  aspect-ratio: 16 / 9;

It's important to note that this property prescribes an aspect ratio. Our elements won't respect it if we define both a height and width for an element.

The support isn't quite there yet though.

Here's a demo to play with. It should work in Chrome 88+.

Check out this pen by Jhey (@jh3y) on CodePen.

And here's a screencast.

The padding Trick permalink

If you don't know the dimensions of your content but your content has a constrained width, you can use this. The trick is to wrap your content in a container and pad that container out using padding-bottom. You then absolutely position your element into that container.

          .wrap {
  overflow: hidden;
  padding-bottom: 56.25%
  position: relative;
  width: 100%;
.element {
  position: absolute;
  height: 100%;
  left: 0;
  object-fit: cover;
  top: 0;
  width: 100%;

The trick here is to work out the correct padding for your desired aspect ratio.

If the ratio was 16:9, the padding required is 56.25%. We can work this out with

aspect ratio height / aspect ratio width

For example, 9 / 16 = 56.25.

Check out this pen by Jhey (@jh3y) on CodePen.

This works because of the absolute positioning. We are letting the browser determine what height the container should be.

Use CSS Variables permalink

The last way works if you know one of the dimensions for your element. We can use CSS variables and calc to make CSS work out the element size for us. This is the gist of it.

          --aspect-ratio: calc(16 / 9);
--width: 400px;
--height: calc(var(--width) * var(--aspect-ratio));

You could swap that around so the width is being calculated. Or, you might use the aspect-ratio variable scoped when you need it.

          .element {
  width: 160px;
  height: calc(160px * var(--aspect-ratio));

This way has a lot of possibilities. And it's down to your design how you'd go about using this approach.

Have a play with this demo

Check out this pen by Jhey (@jh3y) on CodePen.

And here's a walkthrough using it.

That's it! permalink

That's a look at different ways to handle aspect ratio with CSS. The new way looks like it's going to be a great addition and will save us some styles.

Hero Photo by Rolands Zilvinskis on Unsplash