長方形の画像をCSSで上下左右中央に配置して正円にトリミングする

アバター画像とかをCSSで丸くくり抜くときに、img要素にborder-radius: 50%を指定するか、以下のような感じにすれば丸くくり抜きできるけど、画像が正方形じゃなかった場合に縦横比が伸びておかしくなってしまう。

<span class="avatar">
  <img src="https://github.com/tacamy.png" alt="">
</span>

.avatar {
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  width: 32px;
  width: 32px;
}
.avatar > img {
  width: 100%;
  height: 100%;
}

HTMLの構造は上記のままで、object-fit: coverとtransformを使ってCSSを以下のように指定すると、縦長でも横長でもどちらの場合でも、画像が上下左右中央にトリミングされて正円にピタッと収まる。

.avatar {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.avatar > img {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  object-fit: cover;
}

例によってIE11は対応していない（caniuse）ので、対応するにはポリフィルが必要そうだけど、わたしは対応してないのでどのポリフィルが使えるのかは把握していないのでよいのがあったら教えてほしい。

すぐ忘れちゃうのでメモっといた。

thx to id:nakajmg