图像比CSS网格行高

Question

我正在制作一个三列网格，除了图像超出指定行的高度之外，它工作正常，

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>

我能够通过提供100％的图形高度来修复它，但是当我调整浏览器大小时，它的缩小可能不会调整大小，这就是此解决方案的问题