https://ross-bel.ru/g/s3/misc/adaptiveimage/1.0.0/adaptiveimage.js

1;(function($) {
2	window.img_convert_cache = {};
3
4	jQuery.fn.imagesLoaded = function(callback, fireOne) {
5		var
6			args = arguments,
7			elems = this.filter('img'),
8			elemsLen = elems.length - 1;
9
10		elems.each(function() {
11			// cached images don't fire load sometimes, so we reset src.
12			if (!this.complete) {
13				this.onload = function(e) {
14					if (fireOne) {
15						!elemsLen-- && callback.call(elems, e);
16					} else {
17						callback.call(this, e);
18					}
19				}
20			} else {
21				if (fireOne) {
22					!elemsLen-- && callback.call(elems, {});
23				} else {
24					callback.call(this, {});
25				}
26			}
27
28			this.src = this.src;
29		});
30	};
31
32	jQuery.fn.wm_img_convert = function () {
33
34		var make = function () {
35			var isIE = (GetIEVersion() > 0 && GetIEVersion() < 12) ? true : false;
36
37			var $elem = $(this);
38
39			$elem.find('.img-convert').each(function() {
40				var $img = $(this).find('img');
41
42				if ($img.length) {
43					var img_src = $img.attr('src');
44
45					if (window.img_convert_cache.hasOwnProperty(img_src)) {
46						convert(window.img_convert_cache[img_src], $img);
47					} else {
48						$img.imagesLoaded(function() {
49							window.img_convert_cache[img_src] = {};
50							convert(window.img_convert_cache[img_src], $img);
51						});
52					}
53				}
54			});
55
56			function convert(cache_img, $img) {
57				$img.css({"max-width": "100%", "max-height": "100%"});
58
59				if ($img.parent().hasClass('img-cover')) {
60					var img_width,
61						img_height,
62						img_prop;
63
64					if (!cache_img.width || !cache_img.height) {
65						if ($img.attr('src').slice(-3) == 'svg') {
66							$.get($img.attr('src'), function(svgxml) {
67								var attr_width = svgxml.documentElement.getAttribute("width"),
68									attr_height = svgxml.documentElement.getAttribute("height"),
69									attr_viewBox = svgxml.documentElement.getAttribute("viewBox");
70
71								if (attr_width && attr_height) {
72									img_width = attr_width;
73									img_height = attr_height;
74								} else if (attr_viewBox) {
75									var viewbox_arr = attr_viewBox.split(" ");
76									img_width = parseInt(viewbox_arr[2]);
77									img_height = parseInt(viewbox_arr[3]);
78								}
79								cache_img.width = img_width;
80								cache_img.height = img_height;
81
82								setStyles($img, img_width, img_height);
83
84							}, "xml");
85						} else {
86							cache_img.width = img_width = $img[0].naturalWidth;
87							cache_img.height = img_height = $img[0].naturalHeight;
88						}
89					} else {
90						img_width = cache_img.width;
91						img_height = cache_img.height;
92					}
93
94					setStyles($img, img_width, img_height);
95
96				}
97			}
98
99			function GetIEVersion() {
100				var sAgent = window.navigator.userAgent;
101				var Idx = sAgent.indexOf("MSIE");
102
103				// If IE, return version number.
104				if (Idx > 0)
105					return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
106
107				// If IE 11 then look for Updated user agent string.
108				else if (!!navigator.userAgent.match(/Trident\/7\./))
109					return 11;
110
111				else
112					return 0; //It is not IE
113			}
114
115			function setStyles($img, img_width, img_height) {
116				var $wrap = $img.parent();
117				var wrap_width = parseInt($wrap.width()),
118					wrap_height = parseInt($wrap.height()),
119					wrap_prop = wrap_width/wrap_height;
120
121				var min_width = wrap_height/img_height * img_width;
122
123				if(img_width && img_height) {
124					img_prop = img_width/img_height;
125					if (wrap_prop > img_prop) {
126						$img.css({"max-width": "100%", "width": img_width > wrap_width ? wrap_width : img_width, "min-width": "0", "max-height": "none", "height": "auto"});
127					} else {
128						$img.css({"max-width": "none", "width": "auto", "min-width": min_width > img_width ? img_width : min_width, "max-height": "100%", "height": img_height > wrap_height ? wrap_height : img_height});
129					}
130
131					if (isIE) {
132						var img_convert_direction = $wrap.css('flex-direction');
133						if (img_convert_direction == "column") {
134							if (img_height > wrap_height) {
135								var overflow_side = (img_height-wrap_height)/2;
136								$img.css({'margin-top': overflow_side*-1, 'margin-bottom': overflow_side*-1});
137							}
138						} else {
139							if (img_width > wrap_width) {
140								var overflow_side = (img_width-wrap_width)/2;
141								$img.css({'margin-left': overflow_side*-1, 'margin-right': overflow_side*-1});
142							}
143						}
144					}
145
146				}
147			}
148
149		};
150
151		return this.each(make);
152	};
153
154	var debounce = (function () {
155		return function (fn, time) {
156			var timer, func;
157			func = function() {
158				var args = [].slice.call(arguments, 0);
159				window.clearTimeout(timer);
160				timer = window.setTimeout(function () {
161					window.requestAnimationFrame && window.requestAnimationFrame(function() {

162						fn.apply(null, args);
163					}) || fn.apply(null, args);
164				}, time)
165			};
166			return func;
167		}
168	}());
169
170	$(function() {
171		$(document).wm_img_convert();
172		$(window).on('resize', debounce(function() {
173			$(document).wm_img_convert();
174		}, 100));
175	});
176
177})(jQuery);