JSFiddle - React, Tailwind, and code Playground
HTML
<!-- include the script -->
<script src="https://rawgithub.com/soulwire/fit.js/master/fit.js"></script>
<!-- example elements -->
<div id="foo">
<div id="bar"></div>
</div>
CSS
#foo {
background: #36D7B7;
height: 300px;
width: 400px;
}
#bar {
background: #F62459;
height: 600px;
width: 300px;
}
JavaScript
// get element references
var foo = document.querySelector('#foo');
var bar = document.querySelector('#bar');
// fit bar into foo
// the third options argument is optional, see the README for defaults
// https://github.com/soulwire/fit.js
fit(bar, foo, {
// Alignment
hAlign: fit.LEFT, // or fit.LEFT, fit.RIGHT
vAlign: fit.TOP, // or fit.TOP, fit.BOTTOM
// Fit within the area or fill it all (true)
cover: false,
// Fit again automatically on window resize
watch: false,
// Apply computed transformations (true) or just
// return the transformation definition (false)
apply: true
});