object-fitプロバティを使い、マトンフィレをお好きなようにトリミング

プロバティについて

fill(初期値)、contain、cover、none、scale-down、の5つの値となります。

fill	初期値です。縦横比は維持せず埋め尽くされて表示されます。
contain	縦横比を維持します。要素全体が収まるよう調整され、幅・高さの内長い方に合わせてフィットされます。
cover	縦横比を維持します。要素全体が埋め尽くされるよう調整され、幅・高さの内短い方に合わせてフィットされ、長い方ははみ出しトリミングされます。
none	サイズ調整なく表示されます。
scale-down	none、containの内、小さくなる方が適用されます。

イメージし辛いかと思いますので、コード下部にある5個のボタンより実際の挙動をご確認ください。

img {
  width: 700px;
  height: 300px;
  object-fit: fill;
}

img {
  width: 700px;
  height: 300px;
  object-fit: cover;
}

img {
  width: 700px;
  height: 300px;
  object-fit: contain;
}

img {
  width: 700px;
  height: 300px;
  object-fit: none;
}

img {
  width: 700px;
  height: 300px;
  object-fit: scale-down;
}

位置を指定するプロバティとなり、デフォルトは「50% 50%」の上下左右中央でトリミングされる形となります。
幾つかパターンを用意しましたので、コード下部にある3つのボタンより実際の挙動をご確認ください。

img {
  width: 280px;
  height: 240px;
  object-fit: cover;
  object-position: 50% 50%;
}

img {
  width: 280px;
  height: 240px;
  object-fit: cover;
  object-position: 0 0;
}

img {
  width: 280px;
  height: 240px;
  object-fit: cover;
  object-position: 100% 100%;
}