Simplificaré mi pregunta. Resulta que tengoTengo mi función para agrandar una imagen a pantalla completa, lo cual me funciona en google chromeGoogle Chrome pero no en otros navegadores.
Tengo el siguiente código:
<img id="imagen_test" src="../../Archivos/Noticias/Fotos/14-01-2016/hhhhasas/CAM00414.jpg" style="height:180px;width:100px;max-width:120px;" />
<input id="Button1" type="button" value="button" />
$("#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_foto_full).addClass('aumenta_imagen');
}
.aumenta_imagen{
width:80% !important;
max-width:none !important;
height:100% !important;
}
$("#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 mozillaMozilla, 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,Mozilla se vea bien la imagen en pantalla completa.?