My goal is to have a div that has an aspect ratio of 1:1 on any screen size.
In order to achieve that, I gave my div a width of 50% and height of 50%. I thought by giving it a width of 50% and height of 50% that I would be able to get a perfect square with an aspect ratio of 1:1.
Well, I was wrong...
The div respects the width of 50% that I gave it, for example on a screen size of 200px it takes a width of 100px and on a screen size of 500px it takes a width of 250px, 50% width like I specified.
BUT the height doesn't respect the height of 50% that I gave it... ^^^Again, I assumed that if I gave it a width and height of 50% that the height would be the same as the width and that the div would be a perfect square.
How do I achieve my goal? How do I make my div become a perfect square with an aspect ratio of 1:1 while using percentage width and height?
