Skip to main content
4 de 4
Correcciones de gramática, convertir código en emcv, arreglar bug en el código para que sea ejecutable, eliminar etiquetas no necesarias
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Problema con imagen FullScreen en Mozilla

Tengo mi función para agrandar una imagen a pantalla completa, lo cual me funciona en Google Chrome pero no en otros navegadores.

Tengo el siguiente código:

$("#Button1").click(function (ev) {       
  launchFullScreen(document.getElementById('imagen_test'), 'imagen_test');
});

function launchFullScreen(element, id_imagen) {
  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.mozRequestFullScreen) {            
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) { 
    element.webkitRequestFullScreen();            
  }
  $('#' + id_imagen).addClass('aumenta_imagen');
}
.aumenta_imagen{
  width:80% !important;
  max-width:none !important;
  height:100% !important;                
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="imagen_test" src="http://www.lorempixel.com/100/180/people" style="height:180px;width:100px;max-width:120px;" />
<input id="Button1" type="button" value="button" />

Pero cuando lo pruebo en Mozilla, para agrandar la imagen en pantalla completa, ocurre lo siguiente: Ocupa todo el ancho y alto, lo cual hace que la imagen se vea desproporcionada.

Me gustaría saber, ¿qué debo hacer para que también en Mozilla se vea bien la imagen en pantalla completa?

Danilo
  • 2.5k
  • 6
  • 51
  • 103