Enlarge to Fill Stand-Alone Image Viewer

Make stand-alone images fill the viewport regardless of whether they are too wide or too tall

  1. // ==UserScript==
  2. // @name Enlarge to Fill Stand-Alone Image Viewer
  3. // @author Jefferson "jscher2000" Scher
  4. // @namespace JeffersonScher
  5. // @version 0.5
  6. // @copyright Copyright 2020 Jefferson Scher
  7. // @license BSD-3-Clause
  8. // @description Make stand-alone images fill the viewport regardless of whether they are too wide or too tall
  9. // @match https://*/*
  10. // @grant none
  11. // ==/UserScript==
  12.  
  13. var tgt;
  14. function resizeImg(e){
  15. // don't resize when full size
  16. if (tgt.className.indexOf('overflowing') > -1) return;
  17. var whratio = tgt.width / tgt.height;
  18. var vpratio = window.innerWidth / window.innerHeight;
  19. if (whratio < vpratio){ // width needs more help
  20. tgt.width = parseInt(document.body.clientWidth);
  21. tgt.height = Math.round(tgt.width * (1 / whratio));
  22. // repeat to account for scroll bar
  23. tgt.width = parseInt(document.body.clientWidth);
  24. tgt.height = Math.round(tgt.width * (1 / whratio));
  25. } else {
  26. tgt.height = window.innerHeight;
  27. tgt.width = Math.round(tgt.height * whratio);
  28. // repeat to account for scroll bar
  29. tgt.height = window.innerHeight;
  30. tgt.width = Math.round(tgt.height * whratio);
  31. }
  32. }
  33. var resizeTimeout;
  34. function resizeThrottler(){
  35. if(!resizeTimeout){
  36. resizeTimeout = window.setTimeout(function(){resizeTimeout = null; resizeImg();}, 200);
  37. }
  38. }
  39. if (document.querySelector('head').innerHTML.indexOf('TopLevelImageDocument.css') > -1) {
  40. tgt = document.querySelector('body img'); // first image in body
  41. tgt.addEventListener('click', resizeImg, false);
  42. window.addEventListener('resize', resizeThrottler, false);
  43. window.setTimeout(resizeImg, 50);
  44. }