https://www.kfh.com/.resources/kfh-templates/webresources/kfh-them…ver-simple~2026-06-16-14-30-30-000~cache.js

1// jquery.object-fit-cover-simple.js
2// ====================
3//
4// A simple jquery plugin to do what the css 'object-fit' property does with value 'cover'.
5// The image of the targeted item covers the entire area of the element.
6// Useful in cases when a background-image cannot be used, such as when one wants to load images responsively with srcset.
7// Only on elements of jquery selection.
8// Parent of element to be used for sizing must have css display:block.
9// Does nothing if browser supports object-fit css property, unless called with true
10// in which case the fitting is forced.
11//
12// usage:
13// ------
14// ```
15// $('.selector').objectFitCover();
16// ```
17// Elements must specify their aspect ratio as a decimal via attribute data-ratio.
18// ex. <img src="..." data-ratio="1.333" />
19//
20// Based on work by by Simon Schmid https://github.com/schmidsi
21// Re-worked by Steve Workman https://github.com/steveworkman
22// Object-fit property in CSS3 Images http://www.w3.org/TR/2012/CR-css3-images-20120417/#object-fit
23
24
25(function ($, window, document) {
26
27    var parent;
28    var $bg;
29    var aspectRatio;
30
31    var toResize = [];
32
33    var browserSupportsObjectFit = function () {
34        return ("objectFit" in document.body.style);
35    };
36
37    function findParent(jqObject) {
38        var p = jqObject.parent();
39        var displayType = p.css('display');
40        if (displayType == 'block' || displayType == '-webkit-box' && p.width() > 0) {
41            return p;
42        } else {
43            return findParent(p);
44        }
45    }
46
47    var doObjectFit = function (forceFit) {
48        if (!forceFit) {
49            if (browserSupportsObjectFit()) {
50                return;
51            }
52        }
53
54
55        $(window).resize(resizeBg).trigger("resize");
56
57        return this.each(function () {
58            prepareResize(this);
59        });
60
61
62    }
63
64    var prepareResize = function (elemDom) {
65        var elem = $(elemDom);
66        aspectRatio = Number(elem.attr("data-ratio"));
67        parent = findParent(elem);
68        var item = {elem: elem, ratio: aspectRatio, parent: parent};
69        toResize.push(item);
70        resizeItem(item);
71    };
72
73    function resizeBg() {
74        for (var i = 0, len = toResize.length; i < len; i++) {
75            var item = toResize[i];
76            resizeItem(item);
77        }
78    }
79
80    function resizeItem(item) {
81        var pwidth = item.parent.width();
82        var pheight = item.parent.height();
83
84        if ((pwidth / pheight) < item.ratio) {
85            // cover
86            item.elem.css('width', 'auto');
87            item.elem.css('height', '100%');
88            // center
89            var myLeft = ( item.ratio * pheight - pwidth ) / -2;
90            item.elem.css('left', myLeft);
91            item.elem.css('top', '0');
92
93        } else {
94            // cover
95            item.elem.css('width', '100%');
96            item.elem.css('height', 'auto');
97            // center
98            var myTop = ( (1 / item.ratio) * pwidth - pheight ) / -2;
99            item.elem.css('left', '0');
100            item.elem.css('top', myTop);
101
102        }
103    }
104
105    $.fn.objectFitCoverSimple = doObjectFit;
106
107})(jQuery, window, document);