turn.js 全屏問題，進入全屏時圖像失真

Question

我正在使用 turn.js，我添加了一個事件偵聽器，但是在全屏時它會扭曲圖像。 有沒有辦法根據原始寬度調整寬度？

我嘗試將 90% 的寬度和自動添加到高度，但是放大的圖像被拉伸，當我最小化 window 時，圖像消失了。

如果您需要更多代碼，我很樂意添加它。

這是事件監聽器

   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):fullscreen 並將寬度和最大寬度設置為 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;
}

Answer 1

還是沒有答案？ 我有同樣的問題。

我解決這個問題的方法是刪除全屏，然后簡單地放大圖像。 雖然您可以添加 JavaScript 放大鏡。