imgLiquid

前端 图像
一个调整图片尺寸以适应容器的 jQuery 插件
2018-07-06 我要评论 2 我要收藏

ScreenShot

imgLiquid v0.9.944 / 11-04-2013

一个调整图片尺寸以适应容器的 jQuery 插件

用法

首先引入 JS 文件:
<script src="js/imgLiquid-min.js"></script>
JS 调用
$(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});
Html:
<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="woody.jpg" />
</div>

 

马上查看效果:

http://goo.gl/Wk8bU

或者练习:

http://jsfiddle.net/karacas/3CRx7/#base http://codepen.io/karacas/pen/nlugd

功能:

  • 用到了 CSS 的Background-size 属性 (new!)
  • 兼容 Bootstrap
  • 轻量级:< 压缩后仅 2.0KBs
  • 填充 / 剪切
  • 对齐
  • 响应式
  • 支持 Svg
  • 回调
  • HTML5 的 data-* 属性
  • 支持所有浏览器(包括ie6).

 

选项:

fill

是否填充容器,默认为 true

verticalAlign

垂直对齐. 可选值为 : 'center' // 'top' // 'bottom' // '50%' //'10%'

horizontalAlign

水平对齐. 可选值为 : 'center' // 'left' // 'right' // '50%' //'10%'

回调:

onStart:        function(){},
onFinish:       function(){},
onItemStart:    function(index, container, img){},
onItemFinish:   function(index, container, img){}

hml5 data 属性 (会覆盖 js 选项)

data-imgLiquid-fill="true"
data-imgLiquid-horizontalAlign="center"
data-imgLiquid-verticalAlign="50%"
imgLiquid 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论