A new css property
Browser Compatibility is as of April 2021 still limited to Chrome and Edge.
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.
aspect-ratio: 1 / 1;
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…