cssで画像を円形にくりぬきたい

Question

現在コメント投稿機能を自作のwebアプリケーションに実装している途中なのですが、ユーザーアイコンをyoutubeのコメント欄のように、コメントの左側に表示させるようにしました。
その際、画像を円形で表示したいのですが、私のサイトのユーザーはアイコンが横長になる仕様なので、正円で表示することができません。どうすればよいでしょうか？

<補足>
自分で調べたところcss側でurlを指定してgackground-position:center centerを指定するとできるみたいですが、urlは動的なのでこの方法では無理でした。

<追記>
画像サイズ：90px * 50px

<img class="icon" src="〇〇〇〇☓☓☓">

img.icon{
  width:50px;
  height:50px;
  border-radius:50%;
}

ただし上記のコードで実現できないのは明らかです。こうすると、画像の縦横比は変わってしまいます。

Comments

[spookybird]

試してみたソースコードと対象の画像と同サイズのダミー画像または画像のサイズを教えてください。

[wowow]

わかりました、本文に追記します

Answer 1

IE11でなければこれでいけます。

img.icon {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

IE11でやろうと思うとちょっと面倒くさいかもしれません。

ご要望にお応えして追記

IE11だとこうすればいけると思います。
CSSのみでやる方法は、もしかするとあるかもしれませんがちょっと思いつきませんでした。

<div class="icon">
  <img src="********" />
</div>

.icon {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.icon > img {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 45px);
}

Comments

[memu2]

横から失礼します。このコードの説明をして頂いてもいいですか？
どういう役割があるのか知りたいです。

[spookybird]

私があれこれ説明するより、MDNで仕様を読んでもらった方がちゃんと理解できると思いますので、
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
こちらをどうぞ。
わりと素直でわかりやすいCSSプロパティだと思います。

[wowow]

丁寧な回答ありがとうございます。
今試してみて、chromeでうまく成功しました。
後学のためにIE11に対応させる場合のコードも追記してくださいませんか？

[wowow]

バタバタしていてお礼が遅れました。
ありがとうございます。
もう一人の方も本当にシンプルで素晴らしい回答でしたが、親身に教えてくださったので、ベストアンサーにさせていただきました。

Answer 2

urlが動的なのであれば、urlだけhtml側に持ってくるのもありかと。

<div class="icon" style="background-image:url(*****);"></div>

.icon {
  width: 50px;
  height: 50px;
  background-position: center;
  border-radius: 50%;
}

Comments

[wowow]

この方法もとても素晴らしいですね、さっそく試してみたいと思います。ありがとうございました。