A new css property aspect-ratio finally allows for a width and height responsive square without any JavaScript.

Browser Compatibility is as of April 2021 still limited to Chrome and Edge.

Here’s how it works!

Create two objects. A container and a square. Give the square an aspect ratio equal to one, and a width and max height of 100% of the parent container.

Optionally you can center the square within the parent, with the old position and transform trick…

I have not found a way to center the square, the more convenient way…

Kristoffer Højelse


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store