christianboyle/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="height=1920; width=1080;">

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #000;
  }

  img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    object-fit: none;
  }
</style>

<body>
  <img class="canfullscreen" src="https://path/to/your/art.png">
  <script>
    function getreqfullscreen() {
      var root = document.documentElement
      return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
    }

    function getexitfullscreen() {
      return document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen
    }

    function getfullscreenelement() {
      return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
    }

    var globalreqfullscreen = getreqfullscreen()
    var globalexitfullscreen = getexitfullscreen()

    document.addEventListener('click', function (e) {
      var target = e.target
      if (target.tagName == "IMG" && target.classList.contains('canfullscreen')) {
        if (getfullscreenelement() == null) {
          globalreqfullscreen.call(target)
        }
        else {
          globalexitfullscreen.call(document)
        }
      }
    }, false)

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="height=1920; width=1080;">

	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #000;
	}

	img {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	object-fit: none;
	}
	</style>

	<body>
	<img class="canfullscreen" src="https://path/to/your/art.png">
	<script>
	function getreqfullscreen() {
	var root = document.documentElement
	return root.requestFullscreen \|\| root.webkitRequestFullscreen \|\| root.mozRequestFullScreen \|\| root.msRequestFullscreen
	}

	function getexitfullscreen() {
	return document.exitFullscreen \|\| document.webkitExitFullscreen \|\| document.mozCancelFullScreen \|\| document.msExitFullscreen
	}

	function getfullscreenelement() {
	return document.fullscreenElement \|\| document.webkitFullscreenElement \|\| document.mozFullScreenElement \|\| document.msFullscreenElement
	}

	var globalreqfullscreen = getreqfullscreen()
	var globalexitfullscreen = getexitfullscreen()

	document.addEventListener('click', function (e) {
	var target = e.target
	if (target.tagName == "IMG" && target.classList.contains('canfullscreen')) {
	if (getfullscreenelement() == null) {
	globalreqfullscreen.call(target)
	}
	else {
	globalexitfullscreen.call(document)
	}
	}
	}, false)

	</script>
	</body>

	</html>