How do I get onmouseenter and onmouseleave to report with respect to an image rather than to its containing div?

Consider an img contained in a div. (See example below.) I’d like onmouseenter and onmouseleave to trigger when the pointer enters and leaves an image, but instead they trigger when the pointer enters and leaves… the image’s container?!? How do I fix this?

Things that work but are unsuitable for my purposes:

removing width: 100%; from the container’s styling
changing object-fit: contain; in the image’s styling

function mouse_entered() {
  console.log("mouse entered!")
}

function mouse_left() {
  console.log("mouse left!")
}

.image-container {
  width: 100%;
  height: 100vh;
}

.image {
  width: inherit;
  height: inherit;
  object-fit: contain;
}

<div class="image-container">
  <img src="https://lh3.googleusercontent.com/-s05ILbxi6YA/AAAAAAAAAAI/AAAAAAAAACc/yAd6W8jNSBI/photo.jpg?sz=256"
     class="image"
     onmouseenter="mouse_entered()"
     onmouseleave="mouse_left()"
>
</div>