Poner imagenes cuadradas en vez de rectangulas?

[yopmail]

Hola estoy intentando que la imagen de los post de este sitio: https://freebify-templateify.blogspot.com/

sean cuadradas responsivas, en vez de rectangulares, osea que siempre se mantenga el tamaño cuadrado de la imagen..


He cambiado el alto de las imagenes:

.index-post .entry-image-wrap {
position: relative;
float: left;
width: 100%;
height: 150px;
overflow: hidden;
margin: 0 0 12px;
border-radius: 6px;
}

El problema que como el with siempre es 100%, se va adaptando sin respetar la forma cuadrada de la imagen...

Alguna idea de como se puede hacer que mantenga siempre el cuadrado ?

Gracias!

[Gloton]

Podria ser algo asi

Código HTML:

<div class="cuadrado">
  <img class="content"src="https://i.imgur.com/9Q9pgmR.jpeg">
</div> 

Código HTML:

.cuadrado {
  position: relative;
  width: 50%;
}

.cuadrado:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 5px;
}

[Panino5001]

También podrías utilizar object-fit: https://developer.mozilla.org/es/doc...CSS/object-fit