https://github.com/gilbitron/fitimg
A jQuery plugin to make images "fit" to their containers.
https://github.com/gilbitron/fitimg
Last synced: 27 days ago
JSON representation
A jQuery plugin to make images "fit" to their containers.
- Host: GitHub
- URL: https://github.com/gilbitron/fitimg
- Owner: gilbitron
- License: mit
- Created: 2013-06-13T12:55:15.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2018-05-04T09:39:33.000Z (about 7 years ago)
- Last Synced: 2025-04-13T01:13:14.667Z (27 days ago)
- Language: JavaScript
- Homepage: http://dev7studios.com/demo/fitimg
- Size: 5.86 KB
- Stars: 25
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.txt
- License: license.txt
Awesome Lists containing this project
README
### This repo is no longer maintained. If you would like to take over ownership please [get in touch](mailto:[email protected]).
Fitimg
======
Fitimg is a jQuery plugin to make images "fit" to their containers. [See the demo](http://dev7studios.com/demo/fitimg).
Requirements
------------
1. jQuery v1.8+
2. The [imagesLoaded](https://github.com/desandro/imagesloaded) plugin (v3+)
The imagesLoaded plugin is optional but Fitimg won't work very well without it. See Advanced section below.
Usage
-----
Include the scripts and styles in your HTML head:
```html
```
Then make sure your images have container divs wrapping them:
```html
```
Then simply hook up Fitimg:
```html
$(document).ready(function(){
$('.imgwrap').fitimg();
});
```
Advanced
--------
Fitimg has an `afterLoad` event which is triggered after the image has been loaded and positioned. For example:
```html
$(document).ready(function(){
$('.imgwrap').fitimg({
afterLoad: function(){
// do something here...
}
});
});
```
Fitimg will add a `fitimg-loaded` class to images once they have been loaded and positioned. By default Fitvid uses opacity to hide the images, but to make sure you're images don't flash before Fitvid has loaded, you can help by making sure you're images have zero opacity. For example in CSS:
```css
.imgwrap img { opacity: 0; }
```
If you are not using the imagesLoaded plugin you should use jQuery's `$(window).load()` event rather than `$(document).ready()`, to make sure the images have fully loaded.
Browser Compat
--------------
Fitimg works in all modern browsers (Chrome, Firefox, Safari, Opera) and in IE8+.
Credits
-------
Fitimg was created by [Gilbert Pellegrom](http://gilbert.pellegrom.me) from [Dev7studios](http://dev7studios.com). Released under the MIT license.