Google Chrome - Full Screen Image Problem

Navigation
1

The original image is this: link

I'm using event click to call function "toggleFullscreen" .

Follow 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

<scripttype="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 the image, the image remains the same size as the img tag. She is not leaving off the original picture like this: link in full screen.

Here's at jsfiddle: link

Any solution?

    
asked by anonymous 30.12.2016 / 19:16

1 answer

2

For 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 : link

    
30.12.2016 / 19:33
Sockets Python disconnect client How to make a button addition system with unique events to launch?