<div class="margin">
    <div class="squareframe">
    <img src="https://s-i.huffpost.com/gen/2502734/images/o-MICHELLEOBAMA_ORIGINAL-facebook.jpg" alt="">
  </div>

  <div class="squareframe">
    <img src="https://static.politico.com/dims4/default/7c0a918/2147483647/resize/1160x>/quality/90/?url=https%3A%2F%2Fstatic.politico.com%2F91%2Fe7%2Fa1e70c214510845a65fb4974c3b2%2Fgallery-background-1.jpg" alt="">
  </div>

  <div class="squareframe">
    <img src="https://peopledotcom.files.wordpress.com/2017/12/melania-trump-ivanka.jpg" alt="">
  </div>

</div>

.margin {display:flex; }
.squareframe {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: red;
  margin: 20px;
}
.squareframe img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height:100%;
  width: auto;
  height:auto;
  max-width:200%;/* would allow for portrait to still fit even if width is half the height*/
  transform: translate(-50%, -50%);
}

@supports (object-fit: cover) {
  .squareframe img {
    position: static;
    height: 100%;
    width: 100%;
    transform: none;
    object-fit: cover;
  max-width:none;
  }