JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
</div>

CSS

#test {
    height:150px;
    width:200px;
    border:1px solid red;
    background:#eee url(http://placehold.it/300/300) center center no-repeat;
    background-size: 50%;
}

    @media all and (max-width: 500px) { /* orientation:landscape */
         #test {background-size: auto 50%;}
    }

JavaScript

var foo = 83.45,
    el = document.getElementById("test");

/* JavaScript Media Queries */
if (matchMedia) {
	var mm = window.matchMedia("(max-width: 500px)"); /* use "orientation:landscape" */
	mm.addListener(onMatchedMedia);
	onMatchedMedia(mm);
}
function onMatchedMedia(mm) {
    console.log(mm);
    if(mm.matches){
        el.innerHTML="matches!";
        el.style.backgroundSize = 'auto ' + foo.toFixed(0) + '%';
    } else {
        el.innerHTML="";
        el.style.backgroundSize = foo.toFixed(0) + '%';
    }
}