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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!