Пишу приложене, которое должно уметь масштабировать элементы как к примеру в фотошопе: есть контейнер, в не определенное количество элементов, которые при уменьшении/увеличении контейнера должны вместе с ним адаптированно уменьшаться/увеличиваться, к примеру как на сервисе canva.com, когда презентацию уменьшаешь или увеличиваешь то элементы должны подстраиваться.
Так как все это должно работать на js, адаптиваная верстка не катит)
Из размышлений я пришел к следующему:
Элементы должны менять только размеры (ширину, высоту с учетом соотношения сторон).
Смещения никакого тоже не нужно (top, left, translateX/Y)
Написал код изменения размера элемента (только для уменьшения):
let width = this.container.clientWidth;
let scalePercent = (this.maxWidth - width) * 100 / this.maxWidth; // this.maxWidth - это изначальная ширина контейнера, самая большая.
let elemWidth = this.container.clientWidth - (scalePercent * 100 / this.container.clientWidth);
let height = (width * this.aspectRatio / 100);
elemstyle.height = height + 'px';
elem.style.width = width + 'px';
В общем я высчитываю процент из ширины контейнера - текущая ширина контейнера, потом из этого процента получаю нужную ширину для элемента. Ну и высоту ставлю пропорционально ширине.
И это не работает правильно. Элементы уменьшаются очень быстро, до точек...
Подскажите рабочий способ пожалуйста.
