Reports

This issue is occurring because of the CSS. The 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>

79363419