CSS aspect-ratio: my first experience

How drawing a circle made me realise I’d become a bit of a Web Dev Dinosaur

This article relates to the post I made on Bluesky yesterday.

TIL about CSS aspect-ratio I was faffing about with padding-bottom trying to get some circles to stay in proportion. CSS has got a whole lot more awesome while I’ve been in JS application land developer.mozilla.org/en-US/docs/W…

[image or embed]— Dave Beesley (@davidbeesley.co.uk) April 24, 2025 at 10:05 AM

For context, I have worked in “Product Land” for nearly five years – with a heavy focus on JavaScript. My CSS skills have not been my main focus – the app I help maintain day to day uses Bootstrap, and that is serviceable enough for the use case.

So, around this time yesterday I was working on a bit of a fun side quest in my day job. The task, draw the lines on a diagram of a football (soccer) pitch.

I could have found an SVG or, even less fun, a rasterised image like a PNG or JPG, but I had decided to challenge myself, and do this with CSS.

I built the original version out quite successfully with pixel based measurements, fixed widths and heights, and I was feeling rather proud of myself – showed a screenshot to my team and lapped up the “MS Teams reaction emojis”.

Then, knowing it wouldn’t be used in a fixed with setting, I opened another instance of it somewhere else in the app where I knew it would be narrower. Sure enough, the lines and circles crossed over each other and looked hideous. It was time to go fluid.

Initially, I simply calculated the widths and heights of the elements as percentages of the container. Those of you watching closely will know that this worked great for the widths, but the height of the container won’t always be proportionate to the width – it is relative to the content (in this case, icons indicating a player position).

Next up, I tried an old trick I used to use, where you set the height with padding-bottom.

In theory, this should have worked as all padding is relative to widths not heights. Another reason this should have worked – is percentage values on the padding of block level elements are relative to the parent container – as eloquently outlined by Chris in this CSS Tricks article

Alas, despite having the same percentage values for width and padding-bottom the values were often out by a few pixels – positive in some widths – negative in others. Nothing consistent I could pin down.

After googling for “Draw a perfect circle percentages responsive” and “aspect ratio css tricks” – I nearly gave up and asked an AI 🤢. But one article in the MDN documentation caught my eye.

I instantly remembered seeing this property being available under a feature flag in either Chrome or Firefox years ago, but the early years of my career came rushing back and I said to myself “surely I can’t use this yet, I bet it’s not supported cross browser”. A quick read through the docs proved otherwise.

So, after quickly swapping out my padding-bottom rules for aspect-ratio – where the values in the rule were simply my original pixel width over my original pixel height (rounded down to the smallest fraction possible, I’m not a monster) – it simply worked!

The result, nice responsive football pitch diagrams which slotted into any width container I wanted (within reason) – and more importantly, a smile on my face and more thumbs up emojis in Teams.