How To Make Responsive CSS with Fixed Aspect Ratio

It's easy to set the width and height in CSS. But what if we want the width to be responsive and height to be always in aspect ratio to the width?

Ideally, we should be able to write something like this:

.ar{
  width: 50%;
  height: .3sw;
}

to set height to be 30% of self width and CSS would just take care of everything for us. Well, at the time of writing, there is no native CSS that can achieve this.

Luckily, using an extra container, it's actually easy to achieve that.

Fixed Aspect Ratio to Width

HTML

First, let's set up the HTML structure. You'll have one container element, and an inner element that you actually want to use. The container element will be used for responsive sizing purposes, and the inner element will be your actual element.

<div class="responsive-ar-cnr">
  <div>
    Whatever content, bla bla
  </div>
</div>

CSS

And now the CSS:

.responsive-ar-cnr{
  position: relative;
  width: 50%;
}

.responsive-ar-cnr::before{
  content: "";
  height: 0;
  padding-bottom: 30%;
  display:block;
}

.responsive-ar-cnr > *{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

The magic here is the padding property. When specified in percentage, it is always relative to the parent element's width regardless of the direction of the padding. (Don't ask me why.) And when you use the bottom padding, it will affect the height of the element. So a 30% bottom padding relative to the parent width pushes the height of the element to be 30% relative to the parent width.

So now, not only your width is relative in itself, the before pseudo element gives a padding / height that is always in a specified aspect ratio relative to the width.

The relative positioning allows the child element to position itself against the container element. And the height is set to 0 just in case.

The last part just says whatever is a direct child of the container will be positioned absolutely and track the container element's sizing.

Expandable Aspect Ratio to Width

By modifying the above code, we can make the box to have an aspect ratio by default but also automatically expand the height if the content is more than what the aspect ratio allows by getting rid of the inner element.

HTML

<div class="responsive-ar-box">
  whatever content
</div>

CSS

.responsive-ar-cnr{
  width: 50%;
}

.responsive-ar-cnr::before{
  content: "";
  height: 0;
  padding-bottom: 30%;
  display:block;
  float: left;
}

.responsive-ar-cnr::after{
  content: "";
  display: table;
  clear: both;
}

The difference is that the inner absolutely positioned element is no longer necessary, and so the relative positioning is removed as well. The before pseudo element is floated to left and then we add an after pseudo element to clear the float.

This basically behaves like:

.ar{
  width: 50%;
  min-height: .3sw;
}

If self width is an actual thing.

Aspect Ratio to Height

So far, we've talked about how to have flexible width and have height to be an aspect ratio to the width. But what if we want flexible / relative height and then have width to be an aspect ratio to the height?

Well, I'm not aware if there is any css technique to achieve that aside from the vh unit. I think the best way to do that would probably be using javascript.

If you know a method to achieve that with css using a percentage unit, please let me know in the comments below.

End

I hope this tutorial has been helpful. Thanks for reading.