JSFiddle - React, Tailwind, and code Playground

by thecoz21

HTML

<img src="http://www.deshow.net/d/file/cartoon/2008-12/bob-ross-landscape-painting-281-2.jpg">
<button id="fullscreen">full screen</button>

CSS

img{
  display: block;
  width: 512px;
  height: 384px;
}

img:-webkit-full-screen{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

img:-moz-full-screen{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

JavaScript

document.querySelector("#fullscreen").addEventListener('click', imgfullscreen, false);

function imgfullscreen(){
    var elem = document.querySelector('img');
    if (elem.webkitRequestFullScreen) {     elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else {
        elem.mozRequestFullScreen();
    }
}