Controlar el tamaño de una imagen dentro de un diseño de cuadrícula CSS

Tengo un diseño de cuadrícula CSS con un montón de áreas y un contenedor de fotos.

No se como:

controla el tamaño de la foto, de modo que esté contenida dentro del área de la cuadrícula

mantenga el ancho de la foto al 100% (por lo tanto igual a su contenedor) y escale la altura del contenedor para que se ajuste a la foto. Básicamente, cuando la ventana se vuelve más pequeña, el ancho de la foto se vuelve más pequeño, y también lo hace la altura, tirando de la etiqueta, el álbum y girando los elementos hacia arriba.

.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>

Respuestas a la pregunta(2)

Su respuesta a la pregunta