JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<img class="responsive" src="//:0#http://webblocks.co/IMG/f5t50vUxlrx6jv1jygA8zKK_seEQO1C32/XPATH/apps/test/test.jpg" />

CSS

img {
    height: 100px;
    width: 100px;
}

JavaScript

var images = document.querySelectorAll( "img.responsive" ),
    style = document.createElement('style'),
    css = '';

[].forEach.call(images, function(imgTag) {
    css += 'img.responsive {' +
    'background-image:url("' + 
        imgTag.src.split('#')[1] +
     '?for=desktop-retina-landscape");' +
    'padding-bottom:56.25%;' + 
   '}';
});



style.type = 'text/css';
(document.head || document.getElementsByTagName('head')[0]).appendChild(style);

if (style.styleSheet && !style.sheet) {
    style.styleSheet.cssText = css;
} else {
    style.innerHTML = css;
}