Controlando o tamanho de uma imagem em um layout de Grade CSS

Eu tenho um layout de grade CSS com várias áreas e um contêiner de fotos.

Não sei como:

controlar o tamanho da foto, para que ela fique dentro da área da grade

mantenha a largura da foto em 100% (portanto, igual ao seu contêiner) e dimensione a altura do contêiner para caber na foto. Basicamente, quando a janela fica menor, a largura da foto fica menor, assim como a altura - puxando a tag, o álbum e girando os elementos para cima.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas: 
    "info    photo photo photo   photo" 
    "comment photo photo photo   photo" 
    "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
}

.photo>img {
  object-fit: cover;
  width: 100%
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}
<div class="container">
  <div class="photo">
    <img src="http://wallpaper-gallery.net/images/image/image-13.jpg" />
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>

questionAnswers(3)

yourAnswerToTheQuestion