Как сделать так чтобы размер картинки изменялся в зависимости от размера окна в CSS?

Вот мой код, помогите пожалуйста, сделать так, чтобы размер логотипа изменялся вместе с размером блока navigation:

.navigation{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(1em + 4vw);
  background-color: rgb(51, 51, 51);
  color: #fff;
  padding: 1vh 2vw;
}

/* Размещаем логотип слева */
.navigation .pic{
  display: flex;
  align-items: center;
}

/* Размещаем элементы меню справа */
.navigation .textBox{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Стили для пунктов меню */
.navigation ul{
  display: flex;
  align-items: center;
  font-size: 1.1vw;
}

/* Стили для ссылок в пунктах меню */
.navigation ul li{
  margin-right: 20px;
  font-family: Cygre;
}

/* Стили для ссылок в пунктах меню */
.navigation ul li a{
  color: #fff;
  text-decoration: none;
}