Изменить размер контейнера - фоновое изображение сохранить соотношение

Question

У меня проблема с сохранением соотношения, когда я нажимаю на кнопку "Открыть".

Я хотел бы изменить размер контейнера с 100% до 60% и сохранить соотношение делений с background-image whoнаходятся внутри.

Я не хочу использовать свойство cass для содержимого.

Я бы хотел сохранить реальное соотношение с исходным размером моих дивов. Как шкала.

Можно мне помочь, пожалуйста?

Вот мой кодовый блок: https://codepen.io/clicclic/pen/PooRjRe

И результат, который я пытаюсь получить: https://css -tricks.com / scaled-пропорционально-blocks-with-css-and-javascript / # article-header-id-1

var $el = $(".aside__img");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $(".aside");

$wrapper.resizable({
  resize: doResize
});

function doResize(event, ui) {
  var scale, origin;

  scale = Math.min(ui.size.width / elWidth, ui.size.height / elHeight);
}

var starterData = {
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
};
doResize(null, starterData);