object-fitプロパティとobject-positionプロパティを活用した正円形の画像表示

CSSのborder-radiusプロパティを使用すると簡単に角丸を作成することができます。
border-radiusプロパティの使い方は MDN web docs ページを参考にしてください。

border-radiusプロパティを上手に活用すると写真を正円形で表示することができます。
その方法は簡単でborder-radius:50%と指定するだけです。

画像を正円表示させる場合の問題点

今回のサンプルの元写真

imgタグで正円形の画像を表示させる場合、元画像を正方形の形に加工しておく必要があります。
そのままではborder-radius:50%を設定しても楕円形になってしまいます。

素直に正方形に加工すれば良いのですが、例えば他の場所でも同一画像を使いたい場合や、さらに元々のサイズを変更したくない場合もあるかもしれません。
そのような場合に、「object-fitプロパティ」と「object-positionプロパティ」を上手に使うとどのようなサイズの写真でも正円の写真表示が可能になります。

サンプル

長方形の写真から正円の表示をする仕組みと考え方

画像を加工して正方形にするのではなく、CSSでwidthとheightを指定することで正方形を作ってしまいます。

縦横比の崩れた状態の加工写真

そうすると縦横比が崩れてしまって、歪な写真になります。

<p><img src="my-img.jpg" alt="appleの写真" class="photo"></p>

ここまでのCSSコード

.photo{
  width:300px;
  height:300px;
  border-radius: 50%;
}

object-fitプロパティで調整した画像

このような問題に対処するには「object-fitプロパティ」の値をcoverにします。そうすると、ちょうどいいように縦横比を保ちながら正円形のサイズにして表示してくれます。
object-fitの詳細はこちらを参考にしてください。

参考：「object-fit」プロパティの値には次のようなものが用意されています。
fill | contain | cover | none | scale-down

ここまでのCSSコード

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

object-positionで調整した画像

さらに画像の表示位置を整えたい場合は、object-positionを使うことで調整ができます。このプロパティで画像の表示位置をズラすわけです。

object-positionプロパティは、ボックス内における置換要素（imgタグで挿入した画像など）の配置を指定します。
object-positionの詳細はこちらを参考にしてください。

参考：object-position プロパティは、ボックス内における置換要素の配置を指定します。
初期値 50% 50%
適用対象 replaced elements
継承 あり
値：ボックス領域の左上からの位置を 横 縦 の順で%値で指定（初期値は50% 50%）するか、数値にpxなどの単位をつけて指定します。
マイナスの値も指定することができます。
また、位置を表すキーワード「left,center,right、top,center,bottom」を使うこともできます。

完成したCSSコード

.photo{
  width:300px;
  height:300px;
  object-fit: cover;
  border-radius: 50%;
  object-position:-150px 0;
}