插件 jQuery.imgLiquid 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.imgLiquid 中文API文档 https://github.com/karacas/imgLiquid

ScreenShot

imgLiquid v0.9.944 / 11-04-2013

A jQuery Plugin to resize images to fit in a container.

Alejandro Emparan (karacas) / @krc_ale Dual licensed under the MIT and GPL licenses. ## 

Usage

Include:

<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>

View in action:

http://jsfiddle.net/karacas/3CRx7/#base

http://codepen.io/karacas/pen/nlugd

Features:

    - Uses CSS Background-size when is available. (new!)
    - Bootstrap compatible.
    - Lightweight: < 2.0KBs gzipped.
	- Fill / Crop.
    - Align.
	- Responsive.
	- Svg support.
	- CallBacks.
    - HTML5 data-* attributes.
	- All browsers (Incl. ie6).

 

Options:


    >js
        fill: true,
        verticalAlign:      // 'center' //  'top'   //  'bottom' // '50%'  // '10%'
        horizontalAlign:    // 'center' //  'left'  //  'right'  // '50%'  // '10%'

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

    >hml5 data attr (overwrite js options)
        data-imgLiquid-fill="true"
        data-imgLiquid-horizontalAlign="center"
        data-imgLiquid-verticalAlign="50%"


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>