画像を<img>のまま、枠いっぱいに切り抜いて表示できます。 中央で切り抜く場合は、位置の指定も要りません。

.thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

<img class="thumbnail" src="photo.jpg" alt="商品の写真" />

画像を背景にして、background-size: coverで切り抜いていました。 HTMLが画像ではなくdivになるため、代わりのテキストを付けるにはrole="img"とaria-labelが必要でした。

.thumbnail {
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center;
}

<div
  class="thumbnail"
  role="img"
  aria-label="商品の写真"
  style="background-image: url(photo.jpg)"
></div>