https://www.biwahaku.jp/js/fitie.js

1this.fitie = function (node) {
2	// restrict to valid object-fit value
3	var objectFit = node.currentStyle ? node.currentStyle['object-fit'] : null;
4
5	if (!objectFit || !/^(contain|cover|fill)$/.test(objectFit)) return;
6
7	// prepare container styles
8	var outerWidth  = node.clientWidth;
9	var outerHeight = node.clientHeight;
10	var outerRatio  = outerWidth / outerHeight;
11
12	var name = node.nodeName.toLowerCase();
13
14	var setCSS = node.runtimeStyle;
15	var getCSS = node.currentStyle;
16
17	var addEventListener = node.addEventListener || node.attachEvent;
18	var removeEventListener = node.removeEventListener || node.detachEvent;
19	var on = node.addEventListener ? '' : 'on';
20	var img = name === 'img';
21	var type = img ? 'load' : 'loadedmetadata';
22
23	addEventListener.call(node, on + type, onload);
24
25	if (node.complete) onload();
26
27	function onload() {
28		removeEventListener.call(node, on + type, onload);
29
30		// prepare container styles
31		var imgCSS = {
32			boxSizing: 'content-box',
33			display:   'inline-block',
34			overflow:  'hidden'
35		};
36
37		'backgroundColor backgroundImage borderColor borderStyle borderWidth bottom fontSize lineHeight height left opacity margin position right top visibility width'.replace(/\w+/g, function (key) {
38			imgCSS[key] = getCSS[key];
39		});
40
41		// prepare image styles
42		setCSS.border = setCSS.margin = setCSS.padding = 0;
43		setCSS.display = 'block';
44		setCSS.height = setCSS.width = 'auto';
45		setCSS.opacity = 1;
46
47		var innerWidth  = node.videoWidth || node.width;
48		var innerHeight = node.videoHeight || node.height;
49		var innerRatio  = innerWidth / innerHeight;
50
51		// style container
52		var imgx = document.createElement('object-fit');
53
54		imgx.appendChild(node.parentNode.replaceChild(imgx, node));
55
56		for (var key in imgCSS) imgx.runtimeStyle[key] = imgCSS[key];
57
58		// style image
59		var newSize;
60
61		if (objectFit === 'fill') {
62			if (img) {
63				setCSS.width = outerWidth;
64				setCSS.height = outerHeight;
65			} else {
66				setCSS['-ms-transform-origin'] = '0% 0%';
67				setCSS['-ms-transform'] = 'scale(' + outerWidth / innerWidth + ',' + outerHeight / innerHeight + ')';
68			}
69		} else if (innerRatio < outerRatio ? objectFit === 'contain' : objectFit === 'cover') {
70			newSize = outerHeight * innerRatio;
71
72			setCSS.width  = Math.round(newSize) + 'px';
73			setCSS.height = outerHeight + 'px';
74			setCSS.marginLeft = Math.round((outerWidth - newSize) / 2) + 'px';
75		} else {
76			newSize = outerWidth / innerRatio;
77
78			setCSS.width  = outerWidth + 'px';
79			setCSS.height = Math.round(newSize) + 'px';
80			setCSS.marginTop = Math.round((outerHeight - newSize) / 2) + 'px';
81		}
82	}
83};
84this.fitie.init = function () {
85	if (document.body) {
86		var all = document.querySelectorAll('img,video');
87		var index = -1;
88
89		while (all[++index]) fitie(all[index]);
90	} else {
91		setTimeout(fitie.init);
92	}
93};
94
95if (/MSIE|Trident/.test(navigator.userAgent)) this.fitie.init();