Using CSS object-fit contain on image leaves blank spaces around it

Question

I have a picture inside of a container image wrapper.

The container's height and breadth are fixed. It will have a dynamic image resolution within.

All I'm attempting to do is apply some box-shadow styling to the image and center it within the container both horizontally and vertically.

However, it leaves a strange-looking blank space around the image. The code is shown below. Similar events occur when a picture is vertical.

.image-wrapper {
  height: 400px;
  width: 400px;
  background-color: rgb(0,200,100);
  padding: 40px;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x200">
</div>

Without the spaces, I only want a shadow to surround the image. I believe I am overlooking something extremely basic here.

Position: relative to the container was added, however, it was unsuccessful.

I attempted to find information on it by searching terms like "css object fit image shadow" and "css object fit on image adds spaces," but I was unable.