--- Jquery picalign plugin ---
--- version 0.1 beta ---
--- 2015 by Paul Revival ---
--- Feedback is here ---

DESCRIPTION

The simplest jquery plugin for aligning/centering/stretching images relative to their parents.
It'll help you to position your <img> in the center of the container, stretching the image like { background: cover } and { backround-position: center center } props do it together, or aligning image (both vertically and horizontally) in the middle like { display:table-cell } does.

No more need for trimming\cropping your images if it doesn't suite to it's container.

1. Take your <img src="..">;
2. Set class .pa-piccent to it.
3. Set width and height to <img>'s container(px, %, rem, etc..).
4. Profit..

HOW TO

This plugin requires jquery-1.11.x and newer to be included.

• Just include to your html scripts-folder:

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.picalign.js"></script>

• Follow such html structure:

<div class="pa-picbox">
  <img src=".." class="pa-piccent">
</div>

...and set some width and height props to .pa-picbox tag.

Or you can just give the class .pa-piccent to all of your img-tags and picalign.js will work independently.
IN THIS CASE you have to set size to it's parent.

---

Simple Example:

---

css:

<style>
  .your-box {
    height: 120px; /*percent, rem, etc..*/
    width: 200px; /*percent, rem, etc..*/
  }
</style>

html:

<div class="your-box">
  <img src=".." class="pa-piccent">
</div>

OPTIONS

This is the beta-version of picalign.js, but you already can choose some modes.

Just add attribute

"data-pa-size"

to your

<img src=".." class="pa-piccent" data-pa-size="..">

and get some miracle.

1. data-pa-size="center"
   Will center your img inside of .pa-picbox without stretching.
   It gives a table-cell effect with { vertical-align: middle } and { text-align: center }, but without 'display: table/table-cell' usage.

2. data-pa-size="fill" (or no "data-pa-size" prop)
   Will produce the default effect with filling the .pa-picbox container with your .pa-piccent.
   Works like { background: cover } and { backround-position: center center } props, but with real image.

---

This is the beta version, so some usefull features are NOT implemented yet!
It'll be implemented in newer versions necessarily :)

Powered by **MIT** License.