Aspect ratio of box with image and text / Img goes narrow to height

Question

I have some boxes with images on my site and anytime I shrink browser to less width, or display on mobile device, images (circles) changes aspect ratio and are not circles anymore..just narrow oval.

HTML/CSS + screenshot example below.

.imgElectroCont {
  display: flex;
  position: absolute;
  align-items: center;
  left: 0;
  margin: 40px 0 0 50px;
  opacity: 1;
  background-color:yellow;
}


.imgElectro {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  border: 5px solid #fff;
  background-color:blue;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 3px 3px 10px var(--colorGreyDark);
}

<div class="imgElectroCont">
  <div class="imgElectro"></div>
  <a href="">Some text here nex to image</a>
</div>

Answer 1

Try to give your .imgElectro class flex-shrink: 0;