CSSで画像を丸く(正円)表示したい

CSSでSNSアイコンのように画像を正円表示しようとしたとき、長方形画像の時どうすんの？ってなったので残しておきます。

結論

widthとheightを指定した上でobject-fitを使用して画像をトリミングするといい。

img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* 縦横比維持しつつトリミング */
    border-radius: 50%;
}

大きさを可変にしたい

ちなみに縦横比を維持しつつ、widthに応じて大きさを変えたいなんて時は次の感じで対応してる。

<div class="container">
    <img src="hogehoge.jpg" />
</div>

.container {
    position: relative;
    width: 100%;
}

.container:before {
    content: '';
    display: block;
    padding-top: 100%; /* 縦横比を自由に設定 */
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}