JSFiddle - React, Tailwind, and code Playground

HTML

<img id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">

<script type="text/javascript">
    var init_width = img.clientWidth;  
window.onload = function(){
       var img = document.getElementById('img')  
       if(img.clientWidth<$(window).width()){
            img.style.width=$(window).width()+"px";
       }
       else if(img.clientWidth>$(window).width()){
            img.style.width=$(window).width()+"px";
       }
       
    if(img.clientHeight<$(window).height()){
             $("#img").css({ "min-width": ""+ init_width +"px" });
             img.style.height=$(window).height()+"px";
       }    
}
    
window.onresize = function() {
   var img = document.getElementById('img')  
       if(img.clientWidth<$(window).width()){
            img.style.width=$(window).width()+"px";
       }
       else if(img.clientWidth>$(window).width()){
            img.style.width=$(window).width()+"px";
       }
       
    if(img.clientHeight<$(window).height()){
             $("#img").css({ "min-width": ""+ init_width +"px" });
             img.style.height=$(window).height()+"px";
       }    
}
</script>

CSS

body{
    overflow: hidden;
}