JSFiddle - React, Tailwind, and code Playground

by trixta

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) {
    loadJS("https://afarkas.github.io/lazysizes/plugins/respimg/ls.respimg.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"></script>

<h3>art direction</h3>

<div class="box ratio-container lazyload" data-bgset="https://picsum.photos/800/400?image=1082 [(max-width: 600px)] |
     https://picsum.photos/1200/600?image=1081 [(max-width: 980px)] |
     https://picsum.photos/1600/800?image=1080 [(max-width: 1200px)] |
     https://picsum.photos/1920/960?image=1079"></div>

<h3>resolution switching</h3>

<div class="box ratio-container lazyload" data-sizes="auto" data-bgset="https://picsum.photos/800/400?image=1076 800w, https://picsum.photos/1200/600?image=1076 1200w, https://picsum.photos/1600/800?image=1076 1600w, https://picsum.photos/1920/960?image=1076 1920w"></div>

<h3>art direction + resolution switching</h3>

<div class="box ratio-container lazyload" data-sizes="auto" data-bgset="https://picsum.photos/800/400?image=1075 800w, https://picsum.photos/1200/600?image=1075 1200w, https://picsum.photos/1600/800?image=1075 1600w, https://picsum.photos/1920/960?image=1075 1920w [(max-width: 600px] |
     https://picsum.photos/800/400?image=1074 800w, https://picsum.photos/1200/600?image=1074 1200w, https://picsum.photos/1600/800?image=1074 1600w, https://picsum.photos/1920/960?image=1074 1920w [(max-width: 980px)] |
     https://picsum.photos/800/400?image=1070 800w, https://picsum.photos/1200/600?image=1070 1200w, https://picsum.photos/1600/800?image=1070 1600w, https://picsum.photos/1920/960?image=1070 1920w [(max-width: 1200px)] |
     https://picsum.photos/800/400?image=1062 800w,...

CSS

html, body {background: #fff;}
.box {
    background: no-repeat;
    background-color: #f7f7f7;
    background-size: contain;
}
.lazyload {
    opacity: 0;
}
.lazyloading {
    opacity: 1;
    transition: 600ms opacity;
    background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
    min-height: 60px;
}
.lazyloaded {
    opacity: 1;
    transition: 10ms opacity;
}
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content:'';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 50%;
    content:"";
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}