How can I automatically fit an image patch of a sprite inside a flex container?

Question

My problem is, I have a sprite image of cards, like shown in this SO post and a flex container setup similarly as shown in another SO post (see code below). My goal is to keep the flex container which handles gracefully a changing amount of cards in it, while using my sprite image and provide some CSS tags to crop the right card. The first mentioned post shows multiple ways on how to crop out a patch from a sprite (while always using background-image inside a div), while the second post shows how to use images inside a flex container, however, I have not yet managed to do both simultaneously, because the object-fit keyword seems to only work with the img tag, and the only way to crop a src image inside an image tag I found is explained here using again the object-fit keyword set to none instead of contain.

Is this even possible? If yes/no, what would be the simplest way to achieve my goal (instead)?

.container {
  display: flex;
  flex-direction: row;
  width: 1000px;
}

img {
  object-fit: contain;
  flex: 1;
  overflow: hidden;
}

<div class="container">
  <img src="https://i.stack.imgur.com/WZ9Od.gif">
  <img src="https://i.stack.imgur.com/WZ9Od.gif">
  <img src="https://i.stack.imgur.com/WZ9Od.gif">
  <img src="https://i.stack.imgur.com/WZ9Od.gif">
</div>