3

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?

1

2 respuestas 2

2

Pude reproducir el problema. Ocurre porque Chrome, Firefox e IE/Edge interpretan la pantalla completa de manera diferente cuando se aplica a una imagen (aunque tengo que buscar fuentes que demuestren este punto):

  • En Chrome, la imagen se agranda proporcionalmente hasta que llega a un tope (el alto o el ancho de la ventana).
  • En Firefox e IE/Edge, la imagen se maximiza ocupando el 100% de la pantalla tanto en horizontal como en vertical (por lo que la imagen se ve estirada).

Chrome parece que respeta el CSS hasta cierto punto, mientras que Firefox e IE/Edge lo ignoran directamente y le aplica su propio estilo de imagen a pantalla completa.

Teniendo eso en cuenta, dejo aquí dos posibles soluciones (la segunda me gusta más porque me parece más limpia):

Opción 1: Aplica la pantalla completa al body

Podrías aplicar la pantalla completa al elemento body y entonces hacer que la imagen seleccionada tenga unos estilos diferentes. De esta manera evitas los posibles problemas con Firefox e IE. Casi mejor si también añades un scrim (un telón o capa intermedia más oscura para separar más visualmente la imagen del resto de contenido).

Por ejemplo, se podría hacer algo así:

$("#Button1").click(function (ev) {       
  launchFullScreen(document.getElementById('body'), '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{
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;               
}
<body id="body">
  <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" />
</body>

Opción 2: Poner la imagen como fondo

Si en lugar de poner la imagen como imagen (con una etiqueta img) se pone como fondo de un div (usando background-image y background-size:contain), al aplicar la pantalla completa, el div ocupa toda la ventana pero por el tamaño del fondo indicado, se muestra de manera correcta.

Éste sería un ejemplo del 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');
}
#imagen_test {
  height:180px;
  width:100px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}

.aumenta_imagen {
  width:100% !important;
  height:100% !important;
  background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imagen_test" style="background-image:url(http://www.lorempixel.com/100/180/people);"></div>
<input id="Button1" type="button" value="button" />

Este segundo ejemplo no se ve bien porque el iframe en el que se ejecuta no permite pantalla completa. Copia el código a una página y ejecútalo de manera local para ver los resultados.

1

Hay un evento llamado "fullscreenchange" que se lanza cuando se inicia o termina el modo de pantalla completa. Ademas usando document.fullscreenElement (con el prefijo apropiado) sabes si entras o sales de pantalla completa.

Pues por lo tanto, simplemente almacenar el valor de style en un atributo auxiliar (propietario) y restaurarlo al salir de pantalla completa. No lo he probado, pero es básicamente algo así:

document.addEventListener("fullscreenchange", onFullScreenChange);
document.addEventListener("mozfullscreenchange", onFullScreenChange);
document.addEventListener("webkitfullscreenchange", onFullScreenChange);
document.addEventListener("msfullscreenchange", onFullScreenChange);

function onFullScreenChange() {
  var fullscreenElement = document.fullscreenElement || 
                          document.mozFullScreenElement || 
                          document.webkitFullscreenElement ||
                          document.msFullscreenElement;

  var elemento = $("#id_del_elemento");

  // verificas si entras o sales de pantalla completa
  if (fullscreenElement) { 
    // almacenas style en otra parte
    elemento.attr({ 'style-temporal' : elemento.attr('style') });
    elemento.removeAttr('style');
  } else {
    // restauras style al volver a modo normal
    elemento.attr({ 'style' : elemento.attr('style-temporal') });
    elemento.removeAttr('style-temporal');
  }
}
2
  • @md, se ve bueno, pero al hacer click al botn de pantalla completa $(".full_pantalla").click(function (e) {...... como le paso el id que se va obteniendo de la base de datos al onFullScreenChange, aquí veo que el id es fijo: var elemento = $("#id_del_elemento");
    – Danilo
    Commented el 7 mar. 2016 a las 18:39
  • @Danilo lo puse como ejemplo, debes usar el $('#' + id_foto_full) que venias usando. Dejame saber si necesitas algo mas. Commented el 7 mar. 2016 a las 19:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.