images taking more height than css grid row

Question

I am making a three column grid and it works fine except that the images are extending out of the height of the specified row,

body {
  max-width: 1700px;
  margin: 0 auto;
}

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 350px;
  grid-column-gap: 50px;
  grid-row-gap: 350px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

figure {
  margin: 0;
}

<main>
  <article>
    <a href="">
      <figure>
        <img src="https://images.unsplash.com/photo-1496672541024-d5ffffdfa045?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1673be41c776e0c5c58a320f79469b82&auto=format&fit=crop&w=703&q=80" alt="">
      </figure>
    </a>
  </article>
  <article>
    <a href="">
      <figure>
        <img src="https://images.unsplash.com/photo-1543097692-fa13c6cd8595?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e13e4d859fd85a4af675d742d0c9138d&auto=format&fit=crop&w=1350&q=80" alt="">
      </figure>
    </a>
  </article>
  <article>
    <a href="">
      <figure>
        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5a2cac72793247.5bf3d0cec9d05.jpg" alt="">
      </figure>
    </a>
  </article>
  <article>
    <a href="">
      <figure>
        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/05e9d572793247.5bf3d0cecc3c4.jpg" alt="">
      </figure>
    </a>
  </article>
  <article>
    <a href="">
      <figure>
        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/05e9d572793247.5bf3d0cecc3c4.jpg" alt="">
      </figure>
    </a>
  </article>
  <article>
    <a href="">
      <figure>
        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/05e9d572793247.5bf3d0cecc3c4.jpg" alt="">
      </figure>
    </a>
  </article>
</main>

i was able to fix it by giving the figure height of 100%, but here is the problem with this solution when i resize my browser its shrinking not resizing probably