I have an image inside of a container and I want it to be a perfect square. I'm setting my width to be 100% of the container and the goal is to get the height
of the image to be the same as the width, as I don't know what size the container will be due to responsive design.
Any ideas? I'm using sass, if that helps..
.container {
width: 50%;
}
.container img {
width: 100%;
height: 400px; //this should be the same as the width value..
}
<div class="container"><img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/></div>
Preferably no javascript solution, but maybe it's not possible otherwise?