Overlayed div is higher than comntaining div. How can I fix with CSS?

Question

I have a wrapping div that contains an image and an overlay.

I want the image to appear 100% the width and height of the wrapping div.

I also want the overlay to appear 100% the width and height of the wrapping div and appear on top of the image.

I have got this working but for one thing: when I resize the browser to small screens, the overlay div appears slightly higher than the image.

Would anyone know what's going on and how I could ammend this?

My code is:

<div class="banner-slide">
  <div class="banner-slide__overlay"></div>
  <img src="dist/images/banner-image.png" class="banner-slide__image">
</div>

SCSS:

.banner-slide {
  max-height: 670px;
  overflow: hidden;
  position: relative;

  &__overlay {
    background: #333;
    opacity: .4;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 99;
  }

  &__image {
    height: 100%;
    width: 100%;
  }
}

Answer 1

I added display:block to img

* {
  margin: 0;
}

.wrapper {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  position: relative;
}

.overlay {
  background: #333;
  opacity: .4;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 99;
}

img {
  height: 100%;
  width: 100%;
  display:block;
}

<div class="wrapper">
  <div class="overlay">
  </div>
  <img src="https://news.nationalgeographic.com/content/dam/news/2018/05/17/you-can-train-your-cat/02-cat-training-NationalGeographic_1484324.ngsversion.1526587209178.adapt.1900.1.jpg" />
</div>