Keep the image as an <img> and crop it to fill the box. When cropping around the center, you don’t need to set the position either.

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

<img class="thumbnail" src="photo.jpg" alt="Product photo" />

The image was set as a background and cropped with background-size: cover. Since the HTML became a div instead of an image, adding alternative text required role="img" and aria-label.

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

<div
  class="thumbnail"
  role="img"
  aria-label="Product photo"
  style="background-image: url(photo.jpg)"
></div>