Математические расчеты для адаптивного масштабирования элемента с предками на JS? Пишу приложене, которое должно уметь масштабировать элементы как к примеру в фотошопе: есть контейнер, в не определенное количество элементов, которые при уменьшении/увеличении контейнера должны вместе с ним адаптированно уменьшаться/увеличиваться, к примеру как на сервисе 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';
В общем я высчитываю процент из ширины контейнера - текущая ширина контейнера, потом из этого процента получаю нужную ширину для элемента. Ну и высоту ставлю пропорционально ширине.
И это не работает правильно. Элементы уменьшаются очень быстро, до точек...
Подскажите рабочий способ пожалуйста.
Математические расчеты для адаптивного масштабирования элемента с предками на JS? Пишу приложене, которое должно уметь масштабировать элементы как к примеру в фотошопе: есть контейнер, в не определенное количество элементов, которые при уменьшении/увеличении контейнера должны вместе с ним адаптированно уменьшаться/увеличиваться, к примеру как на сервисе 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';
В общем я высчитываю процент из ширины контейнера - текущая ширина контейнера, потом из этого процента получаю нужную ширину для элемента. Ну и высоту ставлю пропорционально ширине.
И это не работает правильно. Элементы уменьшаются очень быстро, до точек...
Подскажите рабочий способ пожалуйста.
Так как все это должно работать на 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';
В общем я высчитываю процент из ширины контейнера - текущая ширина контейнера, потом из этого процента получаю нужную ширину для элемента. Ну и высоту ставлю пропорционально ширине.
И это не работает правильно. Элементы уменьшаются очень быстро, до точек...
Подскажите рабочий способ пожалуйста.
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Интересные статьи из справочника
Поможем написать учебную работу
Отвечай на вопросы, зарабатывай баллы и трать их на призы.
Подробнее
Подробнее
Для реализации адаптивного масштабирования элементов с учетом изменения размеров их родительского контейнера на JavaScript, вам нужно правильным образом рассчитывать новые размеры элементов на основе изменения размеров контейнера и соотношения сторон элементов. Вот как это можно сделать:
// Получаем текущие размеры контейнераlet containerWidth = this.container.clientWidth;
let containerHeight = this.container.clientHeight;
// Рассчитываем коэффициент масштабирования по ширине и высоте
let scaleX = containerWidth / this.maxWidth;
let scaleY = containerHeight / this.maxHeight;
// Применяем масштабирование к каждому элементу
this.elements.forEach(element => {
let elementWidth = element.initialWidth * scaleX;
let elementHeight = element.initialHeight * scaleY;
// Применяем новые размеры элемента
element.style.width = elementWidth + 'px';
element.style.height = elementHeight + 'px';
});
В этом примере мы сначала получаем текущие размеры контейнера, затем рассчитываем коэффициент масштабирования для ширины и высоты относительно изначальных максимальных размеров. Затем применяем этот коэффициент к каждому элементу, умножая его на изначальные размеры элементов.
Убедитесь, что у элементов изначально заданы исходные ширина и высота (initialWidth и initialHeight), и что они корректно устанавливаются при инициализации элементов.
Надеюсь, этот код поможет вам реализовать адаптивное масштабирование элементов на JavaScript.