JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div>
    <img src="https://dev.opera.com/articles/css3-object-fit-object-position/photo1.jpg" />
    
</div>
<script>
		// Call polyfill to fit in images
		(function () {
			objectFit.polyfill({
				selector: 'img',
				fittype: 'contain'
			});
		}());
	</script>

CSS

/*!
 * Polyfill CSS object-fit
 * http://helloanselm.com/object-fit
 *
 * @author: Anselm Hannemann <[email protected]>
 * @author: Christian "Schepp" Schaefer <[email protected]>
 * @version: 0.3.4
 *
 */

x-object-fit {
	position: relative !important;
	display: inline-block !important;
}

x-object-fit > .x-object-fit-taller,
x-object-fit > .x-object-fit-wider {
	position: absolute !important;
	left: -100% !important;
	right: -100% !important;
	top: -100% !important;
	bottom: -100% !important;
	margin: auto !important;
}

.x-object-fit-none > .x-object-fit-taller,
.x-object-fit-none > .x-object-fit-wider {
	width: auto !important;
	height: auto !important;
}

.x-object-fit-fill > .x-object-fit-taller,
.x-object-fit-fill > .x-object-fit-wider {
	width: 100% !important;
	height: 100% !important;
}

.x-object-fit-contain > .x-object-fit-taller {
	width: auto !important;
	height: 100% !important;
}

.x-object-fit-contain > .x-object-fit-wider {
	width: 100% !important;
	height: auto !important;
}

.x-object-fit-cover > .x-object-fit-taller,
.x-object-fit-cover > .x-object-fit-wider {
	max-width: none !important;
	max-height: none !important;
}

.x-object-fit-cover > .x-object-fit-taller {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
}

.x-object-fit-cover > .x-object-fit-wider {
	width: auto !important;
	height: 100% !important;
	max-width: none !important;
}

.x-object-position-top > .x-object-fit-taller,
.x-object-position-top > .x-object-fit-wider {
	top: 0 !important;
	bottom: auto !important;
}

.x-object-position-right > .x-object-fit-taller,
.x-object-position-right > .x-object-fit-wider {
	left: auto !important;
	right: 0 !important;
}

.x-object-position-bottom > .x-object-fit-taller,
.x-object-position-bottom > .x-object-fit-wider {
	top: auto !important;
	bottom: 0 !important;
}

.x-object-position-left > .x-object-fit-taller,
.x-object-position-left > .x-object-fit-wider {
	left: 0 !important;
	right: auto...

JavaScript

/*!
 * A polyfill for Webkit's window.getMatchedCSSRules, based on
 * https://gist.github.com/ydaniv/3033012
 *
 * @author: Yehonatan Daniv
 * @author: ssafejava
 * @author: Christian "Schepp" Schaefer <[email protected]>
 *
 */

'use strict';

(function () {
	// polyfill window.getMatchedCSSRules() in FireFox 6+
	if (typeof window.getMatchedCSSRules == 'function') {
		return;
	}

	var ELEMENT_RE = /[\w-]+/g,
		ID_RE = /#[\w-]+/g,
		CLASS_RE = /\.[\w-]+/g,
		ATTR_RE = /\[[^\]]+\]/g,
		// :not() pseudo-class does not add to specificity, but its content does as if it was outside it
		PSEUDO_CLASSES_RE = /\:(?!not)[\w-]+(\(.*\))?/g,
		PSEUDO_ELEMENTS_RE = /\:\:?(after|before|first-letter|first-line|selection)/g;

	// convert an array-like object to array
	var toArray = function (list) {
		var items = [];
		var i;

		for (i in list) {
			items.push(list[i]);
		}

		return items;
	};

	// handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
	var getSheetRules = function (stylesheet) {
		var sheet_media = stylesheet.media && stylesheet.media.mediaText;

		// if this sheet is disabled skip it
		if (stylesheet.disabled) {
			return [];
		}

		if (!window.matchMedia) {
			if (sheet_media && sheet_media.length) {
				return [];
			}
		}
		// if this sheet's media is specified and doesn't match the viewport then skip it
		else if (sheet_media && sheet_media.length && ! window.matchMedia(sheet_media).matches) {
			return [];
		}

		// get the style rules of this sheet
		return toArray(stylesheet.cssRules);
	};

	var _find = function (string, re) {
		var matches = string.match(re);

		return re ? re.length : 0;
	};

	// calculates the specificity of a given `selector`
	var calculateScore = function (selector) {
		var score = [0, 0, 0];
		var parts = selector.split(' ');
		var part;
		var match;

		//TODO: clean the ':not' part since the last ELEMENT_RE will pick it up
		while (part = parts.shift(), typeof part == 'string') {
			//...