Image height same as width

Question

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?

Answer 1

Updated answer (05/11/2023):

CSS is an always evolving language and we can now use aspect-ratio.

This solution requires less code and is less hacky, that's what I would use today.

aspect-ratio:
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

aspect-ratio on MDN
CSS property: aspect-ratio on caniuse

.container {
  width: 50%;
}

.container img {
  width: 100%;
  aspect-ratio: 1 / 1;  /* defining the aspect ratio of the image */
  object-fit: cover;    /* making sure the image isn't distorted */
}

<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>

---

Original answer:

Many of us had given you some hints in the comments, so by now you should be able to create a responsive square.

Fit the image inside the square Just in case you are missing the last part, here is how you can fit the image (with any aspect ratio) into that square. It also means that your image will be cropped if it's not squared.

Snippet:

.container {
  position: relative;
  width: 37%; /* The size you want */
}
.container:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.container img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}

<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>