The other day I was playing with a fullscreen CSS layout using viewport units. I had content that was a fixed aspect-ratio, and I wanted it to fill as much of the screen as possible without overflowing. At first, I was setting the element’s width to 100vw, but of course, if the aspect ratio of the window was greater than the aspect ratio of the content, the content would overflow off the screen. In those cases, I wanted to bind the height of the content to 100vh, instead of binding the width to 100vw.

My first naive attempt to do this was to use Sass’ max function to compare 100vh with 100vw:

$size = max(100vh, 100vw);

In hindsight, this is obviously not going to work. The result of this expression is going to change as the viewport aspect ratio changes. Fundamentally, this is something Sass can’t deal with. Sass kindly explained that to me:

Error: Incompatible units: ‘vh’ and ‘vw’.

After some googling, I came across aspect-ratio media queries. This is exactly what I needed! To build my layout, I use an aspect-ratio media query to alternate between binding against vh and vw based on whether the screen is in a horizontal aspect ratio, or a vertical one.

I whipped up a quick codepen to show this off. Resize the viewport to see it in action:

See the Pen aspect-ratio media queries by Pete Corey (@pcorey) on CodePen.