zoom image into a box preserving aspect ratio

index.css

.tc-ConversationItem[class] .tc-ConversationItem__avatar .tc-AvatarImage {
    // modify these with something like calc(200%), or manual width/height "box" around the image
    // which then gets zoomed to fit
    width: 52px;
    height: 52px;
}

.tc-AvatarImage[class].tc-AvatarImage--size--fit {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.tc-AvatarImage[class] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 1; // possibly remove
}

.tc-AvatarImage[class] .tc-AvatarImage__image-container-square {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.tc-AvatarImage[class] .tc-AvatarImage__image-container-square > * {
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;
}

.tc-AvatarImage[class] .tc-AvatarImage__image-container-square * {
    // there's some kind of min-height bug with IE 11 which requires this
    height: 10px;
}

index.html

<!-- possibly use div instead of span since this example sits inside of a row -->
<span class="tc-UserAvatar tc-AvatarImage tc-AvatarImage--size--fit tc-AvatarImage--user" title="QA Mike Olson 2">
  <div class="tc-AvatarImage__image-container-square" style="background-image: url(&quot;https://some-image/1.jpg&quot;);">
    <img src="https://some-image/1.jpg" alt="QA Mike Olson 2" class="tc-AvatarImage__image">
  </div>
</span>