<figure id="lake">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg 1600w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-large.jpg 2400w" alt="Photograph of Lake Louise, British Columbia">
<figcaption>Fullscreen API with srcset Image Replacement <span><button>Click</button> to present content in fullscreen mode.</span> Press <kbd>ESC</kbd> to cancel.
  </figcaption>
</figure>
* { box-sizing: border-box; }
body { 
  font-family: Avenir, Helvetica, sans-serif; 
  background: #334;
}
#lake { 
  position: relative; 
  font-size: 0; 
}
:-moz-full-screen figcaption { opacity: 0; }
:-webkit-full-screen figcaption { opacity: 0; }
:full-screen #figcaption { opacity: 0; }
#lake figcaption { 
  background: rgba(255,255,255,0.75); 
  position: absolute; bottom: 0; 
  margin: 0; width: 100%;
  padding: 1rem;
  font-size: 1.3rem; 
  transition: 1s; 
}
#lake img { 
  width: 100%; height: auto; 
}
:-moz-full-screen img { 
  width: 100%; 
}
:-webkit-full-screen { 
  width: 100%; 
}
:-moz-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

:-ms-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}
function launchFullscreen(element) {
if (element.requestFullscreen) {
   element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} 
}
var lake = document.getElementById("lake"),
fullbutton = lake.getElementsByTagName("button")[0];
fullbutton.onclick = function() {
  launchFullscreen(lake);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js