9 / 16

The other day I needed to quickly see pixel dimensions that were exactly in a 9 / 16 aspect ratio. Like: 180 / 320. That’s perfectly in that ratio. You might be able to think of that one in your head, but how about 351 / 624? That’s harder to think of. And I wanted to visualize it somehow, so I ended up making a web component (<aspect-ratio-machine>) that would display a resizable box in that exact aspect ratio (thanks to CSS’ aspect-ratio) then also display the pixel dimensions as well.

That’s a light-DOM-only web component that just “enhances” otherwise normal HTML. Perhaps it’s not bursting with usefulness, but it was useful to me.

The reason it was useful, by the way, is that I was playing around with YouTube Shorts, and the thing I was using to upload was very strict that the video was exactly 9 / 16 ratio. I wanted to record somewhat arbitrary sections of my screen, then crop and arrange and stuff later into a size that accommodated 9 / 16, and I had to type in the pixel dimensions manually in the particular software I was using to get there.

I also needed integers. A failing of my first example above is that the resizer was happy to do sub-pixel values, which were not useful to me as the software I was using to make a video canvas size did not accept them.

I also realized that actually seeing a box in the 9 / 16 size wasn’t particularly useful. I know what a rectangle looks like. So instead a built a more simple solution with a range slider that updated numbers on the screen.

Niche problem; niche solution. But hey I like building little tools for myself so I thought I’d share. “Home Cooked Apps” as it were.