использовать JavaScript для преобразования масштабного дочернего div в parent

Question

Я изо всех сил пытался найти и / или написать чистый javascript (не jQuery, не могу использовать библиотеку в приложении) в моем приложении ReactionJs, которое масштабирует дочерний div до ширины его родителя.

У меня есть оболочка (родительская) с максимальной шириной, скажем, 1200px. Это дочерний div, в масштабе 100% это 1400px. При загрузке DOM дочерний div будет переполнен на 200 пикселей. Obvi. Дочерний элемент div должен масштабироваться до родительского элемента div и обновлять его масштаб по мере уменьшения размера окна.

Содержание в дочернем div ДОЛЖНО масштабироваться, я не могу просто установить его ширину на 100%, так как он изменяет размер вместе с родителем. Дочерний элемент будет «предварительным просмотром» веб-сайта, который будет фактически масштабироваться (как изображение).

Я нашел это из CSS-хитрости , но мне не удалось заставить его работать после переписывания его в javascript (не jQuery).

var $el = $("#very-specific-design");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#scaleable-wrapper");

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

function doResize(event, ui) {

  var scale, origin;

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

  $el.css({
    transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
  });

}

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

Любая помощь?