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