CSSで画像をトリミング

背景画像の感覚で使える「object-fit」

/* CSS */
img {
  width: 100px; /* 必須。値は任意（画像指定横サイズ） */
  height: 100px; /* 必須。値は任意（画像指定縦サイズ） */
  object-fit: contain;
  object-fit: cover;
  object-fit: fill;
  object-fit: none;
  object-fit: scale-down;
}

上記のプロパティいづれかをを画像に指定してあげる。実質使用するのは「contain / cover / none」じゃないかと。

object-fit: contain

画像の縦横比率を保ったまま、画像の縦横どちらかが最大値（画像指定縦横サイズの縦もしくは横）になるように合わせて拡大縮小してくれる。なので潰れたりしないで表示が可能。ただし画像指定縦横サイズの比率とマッチしない場合は「余白」が出来る。

object-fit: cover

画像の縦横比率を保ったまま、画像指定縦横値内に目一杯拡大縮小してくれる。containと同じく潰れたりしないで表示が可能。ただし画像指定縦横サイズの比率とマッチしない場合、溢れた部分は「トリミング」される。

object-fit: fill

画像に「width: 100%」「height: 100%」したのと同じ。目一杯拡大縮小するけど、画像指定縦横サイズの比率とマッチしない場合は縦横どちらかが潰れる。まず使わないかな・・・

object-fit: none

画像の元サイズそのままで画像指定縦横サイズ内に表示。なので表示される部分は画像の大きさによる。

object-fit: scale-down

「noneもしくはcontain」の振る舞いで、画像指定縦横サイズより画像が大きい場合、小さい方のサイズを画像の縦横どちらかが画像指定縦横サイズの最大値になるようにしてくれると思われる。画像指定縦横サイズより画像が小さい場合はそのまま表示されると言うことなのかも。

サイズ指定があっての「object-fit」

背景画像（background-image）の場合、親ボックスの縦横サイズが決まってないと表示はされない。
同じような表現が出来る「object-fit」だけど、このプロパティの場合は「画像自体にサイズ指定」することにより、背景画像で言う親ボックスのような扱いが出来る。なので幅と高さの指定は忘れずに。
あと注意点として「ieには使えない」。（Edgeは2022.1時点使用可能）

位置指定は「object-position」で

/* CSS */
object-position: 50% 50%; /* 初期値 */
object-position: center top; /* left, center, right, bottom */
object-position: 100px 50px;

この辺は背景画像と同じ感覚で使用していいんじゃないかと。