JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script>
    function loadJS(u) {
        var r = document.getElementsByTagName("script")[0],
            s = document.createElement("script");
        s.src = u;
        r.parentNode.insertBefore(s, r);
    }

    if (!window.HTMLPictureElement || document.msElementsFromPoint) {
        loadJS("https://afarkas.github.io/lazysizes/plugins/respimg/ls.respimg.min.js");
    }
</script>
<script src="https://afarkas.github.io/lazysizes/plugins/parent-fit/ls.parent-fit.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/plugins/bgset/ls.bgset.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js" async=""></script>

<h3>background-size: contain</h3>

<p>created with lazySizes bgset and parent-fit plugins</p>
<div class="row">
    <div class="outerbox">
        <div class="box ratio-container lazyload" data-sizes="auto" data-bgset="http://lorempixel.com/800/400/sports/1/w800 800w 400h, http://lorempixel.com/1200/600/sports/1/w1200 1200w 600h, http://lorempixel.com/1600/800/sports/1/w1600 1600w 800h, http://lorempixel.com/1920/960/sports/1/w1920/ 1920w 960h"></div>
    </div>
    <div class="outerbox">
        <div class="box ratio-container lazyload" data-sizes="auto" data-bgset="http://lorempixel.com/500/700/sports/1/ 500w 700h, http://lorempixel.com/643/900/sports/1/ 643w 900h, http://lorempixel.com/857/1200/sports/1/ 857w 1200h, http://lorempixel.com/1000/1400/sports/1/ 1000w 1400h"></div>
    </div>
</div>
<hr />

<h3>background-size: cover</h3>

<p>created with lazySizes bgset and parent-fit plugins</p>
<div class="row">
    <div class="outerbox">
        <div class="box cover ratio-container lazyload" data-sizes="auto" data-bgset="http://lorempixel.com/800/400/nightlife/1/w800 800w 400h, http://lorempixel.com/1200/600/nightlife/1/w1200 1200w 600h, http://lorempixel.com/1600/800/nightlife/1/w1600 1600w 800h, http://lorempixel.com/1920/960/nightlife/1/w1920/ 1920w 960h"></div>
    </div>
    <div class="outerbox">
       ...

CSS

html, body {
    background: #fff;
}
* {
    box-sizing: border-box;
}
.row {
    display: flex;
    margin: 10px -10px;
}
.outerbox {
    margin: 10px;
    width: 50%;
}
.box {
    background: no-repeat;
    background-color: #f7f7f7;
    background-position: center;
}
.box {
    background-size: contain;
}
.cover.box {
    background-size: cover;
}

.lazyloading:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    content: "";
    background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content:'';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 100%;
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}