画像を円形にして出力するためにはborder-radius:50%のようにborder-radiusが指定されがちです。画像が正方形の場合はこれだけでもきれいな円形になります（サンプル1）。しかし画像が長方形の場合、角が丸くなりますが画像サイズに合わせた楕円になります（サンプル2）。どのような画像であっても真円にしたい、という時は背景画像の仕組みを用いることで実現できます（サンプル3）。
このサンプル3は次のCSSコードで実現できます。
.img-box {
background-image:url(https://lorempixel.com/400/300/animals/1/est);
background-repeat: no-repeat;
background-size: cover;
background-position: center,center;
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
}
width,height,padding-bottomの部分で親要素と同じ横幅、親要素の横幅と同じ高さの空白で埋め尽くされた（paddingのパーセントは親要素の”横幅”基準）divを作ります。このdivをborder-radius:50%をかけることで親要素の横幅と同じ長さの直径を持つ円形のdivにします。
backgroundが接頭辞のコードで背景画像として、縦横比が崩れず端が切り取られる1枚の画像を上下左右中央に配置します。
background-size | MDN
cover
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
no-repeat 画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は background-position CSS プロパティで定義されます。
center のキーワード値の場合は、画像を中央揃えにします。
この二つを組み合わせて真円の形の画像を表示できます。
