https://github.com/karacas/imgLiquid

jQuery plugin to resize images to fit in a container.
https://github.com/karacas/imgLiquid

Last synced: 10 days ago
JSON representation

jQuery plugin to resize images to fit in a container.

• Host: GitHub
• URL: https://github.com/karacas/imgLiquid
• Owner: karacas
• License: mit
• Created: 2012-10-05T17:57:31.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2018-07-06T14:19:33.000Z (over 6 years ago)
• Last Synced: 2024-10-09T20:28:17.726Z (about 1 month ago)
• Language: HTML
• Homepage: http://goo.gl/Wk8bU
• Size: 482 KB
• Stars: 971
• Watchers: 66
• Forks: 207
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: license.txt

Awesome Lists containing this project

• awesome-jquery - imgLiquid - jQuery plugin to resize images to fit in a container. (Images / Data Table)

README

        
![ScreenShot](https://raw.github.com/karacas/imgLiquid/master/tests/logoimgliquid.png)

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:

```html

```

#### js:

```js

$(document).ready(function() {

	$(".imgLiquidFill").imgLiquid();

});

```

#### Html:

```html



	



```

#### 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%"

```