Home / Questions / 5303
Accepted
Danilo
Asked: 2020-03-07 13:18:55 +0800 CST 2020-03-07 13:18:55 +0800 CST

Problem with FullScreen image in Mozilla

  • 772

I have my feature to enlarge an image to full screen, which works for me in Google Chrome but not in other browsers.

I have the following code:

$("#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" />

But when I try it in Mozilla, to enlarge the image to full screen, the following happens: It takes up the entire width and height, which makes the image look disproportionate.

I would like to know, what should I do so that the image can be seen in full screen also in Mozilla?

jquery

2 Answers

  1. Best Answer

    I was able to reproduce the problem. It happens because Chrome, Firefox, and IE/Edge all interpret full screen differently when applied to an image (although I have to search for sources that prove this point):

    • In Chrome, the image is enlarged proportionally until it reaches a stop (the height or width of the window).
    • In Firefox and IE/Edge, the image is maximized to fill 100% of the screen both horizontally and vertically (so the image looks stretched).

    Chrome seems to respect CSS to some degree, while Firefox and IE/Edge ignore it outright and apply their own fullscreen image styling to it.

    Bearing that in mind, I leave here two possible solutions (I like the second one better because it seems cleaner to me):

    Option 1: Apply full screen to the body

    You could apply full screen to the element bodyand then make the selected image have a few different styles. This way you avoid possible problems with Firefox and IE. Almost better if you also add a scrim (a darker curtain or middle layer to more visually separate the image from the rest of the content).

    For example, you could do something like this:

    $("#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>

    Option 2: Put the image as background

    If instead of putting the image as an image (with a tag img) it is put as a background div(using background-imageand background-size:contain), when applying the full screen, divit occupies the entire window but due to the size of the indicated background, it is displayed correctly.

    This would be an example of the code:

    $("#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" />

    This second example doesn't look right because the iframe it runs in doesn't allow fullscreen. Copy the code to a page and run it locally to see the results.

    • 2

  2. There is an event called "fullscreenchange" that is fired when fullscreen mode starts or ends. Also using document.fullscreenElement(with the appropriate prefix) you know if you enter or exit full screen.

    Well therefore, simply store the value of stylein a helper attribute (owner) and restore it when exiting full screen. I haven't tried it, but it's basically something like this:

    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');
  }
}
    • 1