https://idziemy.pl/js/centerImage.js

1/**
2 * bl-jquery-image-center jQuery Plugin
3 *
4 * @copyright Boxlight Media Ltd. 2012
5 * @license MIT License
6 * @description Centers an image by moving, cropping and filling spaces inside it's parent container. Call
7 * this on a set of images to have them fill their parent whilst maintaining aspect ratio
8 * @author Robert Cambridge
9 *
10 * Usage: See documentation at http://boxlight.github.com/bl-jquery-image-center
11 */
12(function($) {
13  $.fn.centerImage = function(method, callback) {
14    callback = callback || function() {};
15    var els = this;
16    var remaining = $(this).length;
17    method = method == 'inside';
18
19    // execute this on an individual image element once it's loaded
20    var fn = function(img) {
21      var $img = $(img);
22      var $div = $img.parent();
23      // parent CSS should be in stylesheet, but to reinforce:
24      $div.css({
25        overflow: 'hidden',
26        position: $div.css('position') == 'absolute' ? 'absolute' : 'relative'
27      });
28
29      // temporarily set the image size naturally so we can get the aspect ratio
30      $img.css({
31        'position':   'static',
32        'width':      'auto',
33        'height':     'auto',
34        'max-width':  '100%',
35        'max-height': '100%'
36      });
37
38      // now resize
39      var div = { w: $div.width(), h: $div.height(), r: $div.width() / $div.height() };
40      var img = { w: $img.width(), h: $img.height(), r: $img.width() / $img.height() };
41      $img.css({
42        'max-width':  'none',
43        'max-height': 'none',
44        'width':      Math.round((div.r > img.r) ^ method ? '100%' : div.h / img.h * img.w),
45        'height':     Math.round((div.r < img.r) ^ method ? '100%' : div.w / img.w * img.h)
46      });
47
48      // now center - but portrait images need to be centered slightly above halfway (33%)
49      var div = { w: $div.width(), h: $div.height() };
50      var img = { w: $img.width(), h: $img.height() };
51      $img.css({
52        'position': 'absolute',
53        'left':     Math.round((div.w - img.w) / 2),
54        'top':      Math.round((div.h - img.h) / 3)
55      });
56
57      callbackWrapped(img)
58    };
59
60    var callbackWrapped = function(img) {
61      remaining--;
62      callback.apply(els, [ img, remaining ]);
63    };
64
65    // iterate through elements
66    return els.each(function(i) {
67      if (this.complete || this.readyState === 'complete') {
68        // loaded already? run fn
69        // when binding, we can tell whether image loaded or not.
70        // not if it's already failed though :(
71        (function(el) {
72          // use setTimeout to prevent browser locking up
73          setTimeout(function() { fn(el) }, 1);
74        })(this);
75      } else {
76        // not loaded? bind to load
77        (function(el) {
78          $(el)
79            .one('load', function() {
80              // use setTimeout to prevent browser locking up
81              setTimeout(function() {
82                fn(el);
83              }, 1);
84            })
85            .one('error', function() {
86              // the image did not load
87              callbackWrapped(el)
88            })
89          .end();
90
91          // IE9/10 won't always trigger the load event. fix it.
92          if (navigator.userAgent.indexOf("Trident/5") >= 0 || navigator.userAgent.indexOf("Trident/6")) {
93            el.src = el.src;
94          }
95        })(this);
96      }
97    });
98  };
99  // Alias functions which often better describe the use case
100  $.fn.imageCenterResize = function(callback) {
101    return $(this).centerImage('inside', callback);
102  };
103  $.fn.imageCropFill = function(callback) {
104    return $(this).centerImage('outside', callback);
105  };
106})(jQuery);