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 ?