Как сохранить пропорции путем изменения высоты при каждом изменении ширины?

Question

[Иван Шашков]

Есть блок :

.wrapper {
	margin: 20px auto auto auto;
	max-width: 1050px;
	height: 700px;
	position: relative;
	background-color: #777;
}

Внутри изображения примерно такого характера:

.img-shape {
	width: 100%;
	position: absolute;
	object-fit: cover;
}

Наложены друг на друга в 10 примерно слоев, но как я понимаю из-за object-fit: cover сам wrapper не хочет высоту свою менять, думал как-то через js можно следить за изменением ширины wrapper и через пропрцию высоту выставлять, но не знаю как это реализовать.
Хелп

Демка

Answer 1

[Ankhena]

Либо хаком с паддингом либо задавать размеры в vw
https://jsfiddle.net/Ankhena/cLhxv7eq/

Comments

[Иван Шашков]

Благодарю!

Answer 2

[Сергей delphinpro]

В ожидании aspect-ratio: все «хаки» для пропорцион...