scalable.js是一款可以使任何HTML元素动态缩放适合父元素的js插件。通过该插件，可以使HTML元素在页面缩放时，大小始终适合其父容器大小，效果类似 css contain属性。

安装

可以通过npm来安装scalable.js插件。

npm install scalable --save-dev

使用方法

在页面引入scalable.js文件。

<script src="js/scalable.js"></script>
HTML结构

使用scalable.js插件的基本HTML结构如下：

<div class="container">
    <div class="element">
        ...
    </div>
</div>
初始化插件

在页面DOM元素加载完毕之后，可以通过new Scalable()方法来初始化该插件。

var scalable = new Scalable(".container", {
    align: 'center',
    verticalAlign: 'center'
});

配置参数

scalable.js插件的可用配置参数如下：

  • align：元素的水平对齐方式，可选值有：left | center | right。默认值为：left。
  • verticalAlign：元素的垂直对齐方式，可选值有：top | center | bottom。默认值为：top。
  • containerHeight：元素高度的设置方式。可选值有：fixed | auto。默认值为：fixed。
  • minWidth：元素的最小宽度。
  • maxWidth：元素的最大宽度。
  • minScale：元素的最小缩放。
  • maxScale：元素的最大缩放。

scalable.js插件的github地址为：https://github.com/ScriptArtist/Scalable