Как реализовать такое?
Можно реализовать через padding. Например, padding-top: 30% - это верхний внутренний отступ 30% от ширины родителя. Обратное поведение можно задать через calc:

padding-top: calc(100px - 10%);

Тогда при уменьшении ширины родителя, верхний отступ будет увеличиваться.
Возможно вам подойдет единица измерения vh. vh и vw -- это типа как %, но их можно использовать где угодно.

Пример:
Можно задать элементу ширину равную 50% от высоты экрана добавив свойство width: 50vh. Точно также можно устанавливать и отступы.

vh -- это % от высоты экрана
vw -- это % от ширины экрана

Изменено: Думаю вам подойдет такой вариант https://www.youtube.com/watch?v=eaOAY0vIB4U&ab_cha...