Создайте элементы с автоматическим изменением размера с помощью Scalable.js

Если вам нужно сделать гибкие элементы, которые автоматически заполняют свои контейнеры Я очень рекомендую Scalable. Этот бесплатный JS-скрипт с открытым исходным кодом идеально подходит для создания плавного дизайна без особого напряжения.

Все в библиотеке Scalable.js является податливым, поэтому вы можете изменять стиль, размер, положение и внутреннее содержимое каждого контейнера. Нужно ли выравнивать элементы по верху или низу страницы? Масштабируемый имеет варианты для этого.

Загляните в репозиторий GitHub, чтобы узнать больше о том, как это работает.

В своей основной форме этот скрипт принимает целевой элемент страницы вместе с некоторыми опциями для настройки отображения. Вот пример кода, взятого прямо из GitHub:

var scalable = new Scalable (containerEl, параметры);

Естественно, первым параметром является тот элемент контейнера, на который вы нацелены (в идеале

или что-то подобное).

Параметр options должен принимать массив пар ключ => значение. Эти варианты включают значения высоты контейнера, минимальная и максимальная ширина, а также минимальная и максимальная шкала (т.е. сколько он может масштабировать с внутренними элементами).

Взгляните на главную страницу проекта, чтобы найти полезную демонстрацию. Вы можете перетащить углы контейнера, чтобы автоматически изменить размеры гибкого элемента внутри. Это довольно круто, так как ниже этой области вы найдете полезный код взяты прямо со страницы.

Существуют способы обработки гибких элементов только с помощью чистого CSS. Тем не менее, эти методы могут показаться устаревшими, и они не предлагают такого большого контроля, как JavaScript.

Если вы хотите попробовать это, просто возьмите копию с GitHub и посмотрите, что вы думаете.

Масштабируемый объект все еще находится в активной разработке, но его легко редактировать для ваших нужд..