弹性网格响应

Question

我在一个具有不同高度和宽度的容器内有2篇文章，调整大小后，我想保留纵横比，我正在使用flexbox。

 body {
      max-width: 90vw;
      margin: 0 auto;
      height: 100vh;
    }
    main {
      height: 100%;
    }
    .grid {
      display: flex;
      justify-content: space-between;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .grid article:first-of-type {
      width: 55%;
      height: 80%;
    }
    .grid article:nth-child(2) {
      width: 40%;
      height: 30%;
    }

 <main>
  <section class="grid">
    <article>
      <a href="">
        <img src="https://images.unsplash.com/photo-1551718304-379de9254671?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="">
      </a>
    </article>
      <article>
      <a href="">
        <img src="https://images.unsplash.com/photo-1551739440-5dd934d3a94a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="">
      </a>
    </article>
  </section>
</main>