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