1

A imagem original é essa: http://4k.com/wp-content/uploads/2014/06/4k-image-tiger-jumping.jpg

Estou usando evento click para chamar função "toggleFullscreen".

Segue o código:

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>

Problema: Depois de clicar na imagem, a imagem permanece o mesmo tamanho de tag img. Ela não está deixando a imagem original como essa: http://4k.com/wp-content/uploads/2014/06/4k-image-tiger-jumping.jpg em tela cheia.

Aqui está em jsfiddle: https://jsfiddle.net/j1fxt7ct/1/

Alguma solução ?

11

1 Resposta 1

2

Para o google-chrome coloque esse estilo para permitir 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/

6

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .