jQuery Plugin To Make Images Fit Into Any Container - Fit Image

File Size: 61.8 KB
Views Total: 2090
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Make Images Fit Into Any Container - Fit Image

Fit Image is a jQuery responsive image solution which allows to resize & centralize an image to fit any size container. The image will always cover the whole container. If it is cropped or expanded, it'll be centered.

Basic Usage:

1. Load jQuery JavaScript library and the jQuery fit image plugin in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/fitimage.js"></script>

2. Wrap your image into a fixed width/height container.

<div style="width: 200px; height: 200px;">
  <img fitimage src="image.jpg">
</div>

3. You can also use fitimage attribute to specify the dimension of its container.

<img fitimage="200,200" src="image.jpg">

4. Initialize the plugin and done.

$(document).ready(function() {
  $('[fitimage]').fitimage();
});

This awesome jQuery plugin is developed by nmietkiewicz. For more Advanced Usages, please check the demo page or visit the official website.