turn.js issue with full screen, the image is distorted when you enter fullscreen

Question

I am using turn.js, I have added an event listener but when on full screen it distorts the image. Is there a way to have the width resize depending on the original width?

I have tried adding 90% to width and auto to height but the enlarged image is stretched and when I minimize the window the image disappears.

If you need any more of the code I will be glad to add it.

This is the event listener

   var flipbookEL = document.getElementById('flipbook');
    window.addEventListener('resize', function (e) {
      flipbookEL.style.width = '';
      flipbookEL.style.height = '';
      $(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
    });

and the create flipbook

function loadApp() {
    // Create the flipbook
    $('.flipbook').turn({
            // Width
            width:922,
            // Height
            height:600,
            // Elevation
            elevation: 50,
            // Enable gradients
            gradients: true,
            // Auto center this flipbook
            //autoCenter: true
    }); 
}

and this is the full screen script:

var elem = document.getElementById("flipbook");

function openFullscreen() {
    
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

I even tried to edit the:not(:root):fullscreen and set the width and max-width to 80% and as important but it still did not seem to work either this or object-fit.

:not(:root):fullscreen {
    object-fit: scale-down;
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
    min-width: 0px !important;
    max-width: none !important;
    min-height: 0px !important;
    max-height: none !important;
    width: 80% !important;
    max-width: 80% !important;
    height: 100% !important;
    transform: none !important;
    margin: 0px !important;
}

Answer 1

Still no answer to that? I am having the very same issue.

The way I went about that problem is I removed the full screen and then simply enlarged the image. Though you could add a JavaScript magnifying glass.