overflow: hidden won’t work because you can’t change the size of an element using it — the image is as big as it is; what you want to do is stop the image content overflowing the parent <div>. If you set overflow: hidden on the parent <div>, it will take effect.
You have to set width and height to 100% as well because object-fit doesn’t affect the size of the <img> tag — it only affects how the image is shown inside the <img> tag — cover for example makes the image maintain its intrinsic aspect ratio, and be displayed large enough so that it covers the entire size of the <img> tag. So initially, the image is being shown at full size anyway, so object-fit will make no difference. When you set the <img> to be as big as its surrounding container, it is then smaller than the intrinsic image size, so it display is then adjusted according to which object-fit value you set.
If you only set the <img> height to 100%, the width dimension is automatically adjusted to a value so that the image will maintain its intrinsic aspect ratio. but then the width is smaller than 100%. It then fits inside the <img> tag, and object-fit works by giving the image its intrinsic aspect ratio when it doesnt have it, so it won’t do anything.
This is my understanding, anyway. This is quite tricky stuff, and it is interesting and useful to question why this behavior is occuring.
Thanks a lot for the detailed answers @chrisdavidmills, and by the way, big thanks as well for the entire front-end learning path, It helped me fill tons and tons of gaps in my knowledge and, as a result, I feel a lot more confident with my understanding of the basics. It is easily the best resource there is.