Изменить размер иерархии узлов DOM?

Question

У меня довольно сложное дерево узлов HTML DOM, которое я хочу скопировать и отобразить в другом месте на странице, но с другим размером.Т.е. я хочу пропорционально масштабировать его.

Я могу клонировать его с помощью

copy = elem.cloneNode(true);

, и он отлично работает при добавлении в другом месте.Однако это тот же размер.Большинство элементов имеют абсолютный размер, и нецелесообразно повторно генерировать контент, часть которого поступает из библиотечных функций.

Можно ли масштабировать всю иерархию узлов, чтобы она выглядела одинаково, только меньше?

Answer 1

Использование CSS на родительском объекте, например transform: scale(0.5)

Фрагмент стека

.original {
  background: red;
  width: 100px;
  height: 100px;
}

.scaled {
  transform: scale(0.5);
}

<div class="original"></div>

<div class="scaled">

  <div class="original"></div>

</div>

Детали:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility