Responsive percentage-based square pure CSS?

I have come up with a javascript solution that works, but a pure CSS solution would be better.

When the page is bigger width wise, the square should adapt to fit fully with the everything visible. When the page is vertical, the square should still fit to be completely visible.

There is a vmin unit. I tried removing the JS then added

width: 80vmin;
height: 80vmin;

to the square’s CSS. I think it has the same result.

1 Like

This is SOO useful. I can’t believe I have never seen this before (I cringe thinking of all the times I used js instead of this…).

Thank you!:heart_eyes: