阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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%"
      
      
      目录
      本文目录
      目录