Высота изображения такая же, как и ширина

Может, это у вас работает?

.container img {
 width: 100%;
 padding-bottom: 100%;
}

Многие из нас дали вам некоторые подсказки в комментариях, так что теперь вы можете создать отзывчивый квадрат.

Поместите изображение внутрь квадрата

На всякий случай, если вам не хватает последней части, вот как можно соответствовать образу (с любым соотношением сторон) в эту площадь. Это также означает, что ваше изображение будет обрезано, если оно не квадратное.

Фрагмент:

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

Еще одна уловка может заключаться в использовании самого изображения на его собственном фоне, а затем применении метода вертикального заполнения с высотой 0.

демо ниже (с фиктивным изображением, ваше мне не показывается)

.container {
  width: 50%;
}

.container img {
  width: 100%;
  height: 0px;/* padding will mage sizing here */
  padding: 50% 0;/* make it a square = 100% vertical padding , none horizontal*/
  background-image: url(http://dummyimage.com/750x1260/951&text=My_BG_Image);/* used a different color from the one in the tag */
  background-size: 100% 100%;
  /* reset just in case */
  background-clip: border-box;
  box-sizing:border-box;
}

<div class = "container"><img src = "http://dummyimage.com/750x1260/159&text=My_Image" /></div>

Обратите внимание, я также использовал размер вашего изображения, которое также не является квадратом. Вы тоже не возражали против растяжки?

Добавьте это в начало файла стиля:

    :root{
  --size: 100px;
}

Затем присвойте определенной переменной ширину и высоту:

width: var(--size);
height: var(--size);

Если вы хотите использовать фоновое изображение, это решение будет работать https://codepen.io/anon/pen/jpyrwB.

Это сохранит квадратное соотношение и заставит изображение покрыть весь div. Он также сохранит изображение по центру и обрежет стороны, если изображение шире, чем высота.

HTML

<div class='square-box'>
    <div class='square-content'></div>
</div>

CSS

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;
}