JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<h1>srcset + sizes</h1>

<img srcset="http://placehold.it/3072x150  3072w,
        				http://placehold.it/2048x150  2048w,
        				http://placehold.it/1280x150  1280w,
        				http://placehold.it/1024x150  1024w,
        				http://placehold.it/960x150  960w,
        				http://placehold.it/640x150  640w,
        				http://placehold.it/560x150  560w,
        				http://placehold.it/480x150  480w" sizes="(min-width: 36em) 50vw,100vw" src="http://placehold.it/320x150" alt="test with sizes" id="p2" />
<div id="t2"></div>

<h1>pictue + srcset + sizes </h1>

<picture>
    <source media="(min-width: 36em)" srcset="http://placehold.it/3050x150&text=FullSize-3050px  3050w,
        				http://placehold.it/2048x150&text=FullSize-2048px  2048w,
        				http://placehold.it/1280x150&text=FullSize-1280px  1280w,
        				http://placehold.it/1024x150&text=FullSize-1024px  1024w,
        				http://placehold.it/800x150&text=FullSize-800px  800w,
        				http://placehold.it/400x150&text=FullSize-400px  400w" sizes="50vw" />
    <source srcset="http://placehold.it/1860x150&text=ArtDirected-1860px 1860w,
        				http://placehold.it/1280x150&text=ArtDirected-1280px 1280w,
        				http://placehold.it/1024x150&text=ArtDirected-1024px 1024w,
        				http://placehold.it/800x150&text=ArtDirected-800px 800w,
        				http://placehold.it/400x150&text=ArtDirected-400px 400w" sizes="100vw" />
    <img src="http://placehold.it/320x150&text=ArtDirected-320px" alt="art" id="p3" />
</picture>
 <div id="t3"></div>

JavaScript

var t1 = document.getElementById('p1').onload = function() {
    document.getElementById("t1").innerHTML='CSS pixels: '+ this.width + 'x' + this.height+'. Which is '+Math.round(this.width/screen.width*100)+'% of screen and '+Math.round(this.width/document.documentElement.clientWidth*100)+'% of viewport. Screen is '+screen.width+' CSSpx wide, viewport is '+document.documentElement.clientWidth+' CSSpx wide and a dppx of '+window.devicePixelRatio;
}
var t2 = document.getElementById('p2').onload = function() {
    document.getElementById("t2").innerHTML='CSS pixels: '+ this.width + 'x' + this.height+'. Which is '+Math.round(this.width/screen.width*100)+'% of screen and '+Math.round(this.width/document.documentElement.clientWidth*100)+'% of viewport. Screen is '+screen.width+' CSSpx wide, viewport is '+document.documentElement.clientWidth+' CSSpx wide and a dppx of '+window.devicePixelRatio;
}
var t3 = document.getElementById('p3').onload = function() {
    document.getElementById("t3").innerHTML='CSS pixels: '+ this.width + 'x' + this.height+'. Which is '+Math.round(this.width/screen.width*100)+'% of screen and '+Math.round(this.width/document.documentElement.clientWidth*100)+'% of viewport. Screen is '+screen.width+' CSSpx wide, viewport is '+document.documentElement.clientWidth+' CSSpx wide and a dppx of '+window.devicePixelRatio;
}