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.