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>

Solution

This issue is occurring because of the CSS. The img tag is stretched to fit the container because it inherits the properties. The JavaScript events are used correctly. However, it seems like it occurs on the containing div because the image expands the container's area. If you use Chrome dev tools and hover over the elements it will make more sense. Here is the code I have updated. Please let me know if this works for you.

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

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

.image-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image {
  max-width: 100%;
  max-height: 100%;
  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>