Javascript turn.js出现全屏失真问题

我使用的是turn.js，我添加了一个事件监听器，但在全屏显示时，它会扭曲图像。有没有办法根据原始宽度调整宽度大小

我试着增加90%的宽度和自动高度，但放大的图像被拉伸，当我最小化窗口时，图像消失了

如果你需要更多的代码，我很乐意添加它

这是事件侦听器

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

还有“创建动画书”

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
    }); 
}

这是全屏脚本：

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();
  }
}

我甚至试着编辑：not（：root）：全屏，并将宽度和最大宽度设置为80%，同样重要，但它似乎仍然不起作用，无论是这个还是对象匹配

: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;
}

---

我添加了flipbookEL.style.width='contain'；但这不适用于全屏，它适用于最小化，因此当您最小化宽度时，将保持全屏（完全没有帮助）