Google Chrome - Image problem in full screen

Question

The original image is this: http://4k.com/wp-content/uploads/2014/06/4k-image-tiger-jumping.jpg

I’m wearing event click to call function "toggleFullscreen".

Follows the code:

Html:

<img id="image" width="450" height="350" src="http://4k.com/wp-content/uploads/2014/06/4k-image-tiger-jumping.jpg">

Script

<script type="text/javascript">
  $("#image").click(function() {
    toggleFullscreen(this);
  });

     function toggleFullscreen(elem) {
     elem = elem || document.documentElement;
     if (!document.fullscreenElement && !document.mozFullScreenElement &&
       !document.webkitFullscreenElement && !document.msFullscreenElement) {
       if (elem.requestFullscreen) {
         elem.requestFullscreen();
       } else if (elem.msRequestFullscreen) {
         elem.msRequestFullscreen();
       } else if (elem.mozRequestFullScreen) {
         elem.mozRequestFullScreen();
       } else if (elem.webkitRequestFullscreen) {
         elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
       }
     } else {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen();
       } else if (document.mozCancelFullScreen) {
         document.mozCancelFullScreen();
       } else if (document.webkitExitFullscreen) {
         document.webkitExitFullscreen();
       }
     }
   }

</script>

Problem: After clicking on the image, the image remains the same size as img tag. It is not leaving the original image like this: http://4k.com/wp-content/uploads/2014/06/4k-image-tiger-jumping.jpg in full screen.

Here it is in jsfiddle: https://jsfiddle.net/j1fxt7ct/1/

Some solution ?

Answer 1

To the google-Chrome put this style to allow full-screen:

img:-webkit-full-screen {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
}

Jsfiddle: https://jsfiddle.net/lbclucascosta/j1fxt7ct/4/