是否可以使用greasemonkey / tampermonkey根据浏览器窗口的大小最大化特定图像的尺寸？

Question

例如，如果我有一个可以浏览的图像库，有时打开多个图库，我必须小心调整一个窗口的大小，因为它会针对同一页面的另一个窗口进行不同的调整。

我能想到的最好的例子是当你在一个新标签中单独打开一个图像时，无论窗口大小，它都会在页面中间按比例自动调整大小。无需滚动

如果它有帮助，这里是显示图像的代码的示例

<div id="i3">
     <a onclick="return load_image(2, 'f46ef2b433')" href="https://testsite.com/b/f46ef2b433/1341428-2">
       <img id="img" src="http://testsite.com/fold01/5dde3b620790893d3ffab2da2437077dd41b31cf-230842-1280-1820-jpg/keystamp=1550591100-88d6d61f5f;fileindex=66272627;xres=2400/_000.jpg" 
         style="height: 1820px; width: 1280px; max-width: 1280px; max-height: 1820px;" onerror="this.onerror=null; nl('27617-430719')"></a></div>

xpath是：// * [@ id =“img”]

我见过插件用视频做这个，但我希望用图像来做。看看其他“相似”的例子让我感到困惑，而不仅仅是帮助我

(function() {
    'use strict';

    var x;
    x = document.getElementById("img");
    x.style.maxHeight = "100vh";
    x.style.maxWidth = "100vw";
    x.style.width = "";
    x.style.height = "";
    x.style.position = "fixed";
    x.style.top = "0";
    x.style.left = "15%";
})();

这是我当前更新的脚本。我一直无法改变max-height和max-with值，但其他一切都已经解决了。没有它，除非有另一种方法，否则我无法完成任务

x.setAttribute("style", "max-Height: 100vh");

这可行，但抹去了所有其他属性......

两者似乎只在控制台中工作，而不是在脚本中，只要修改最大高度和最大宽度值。更改其他值没有问题

Answer 1

根据您的描述，您可以使用vh和vw单位。这些单位相对于视口的大小。 在空白页面中尝试以下示例。图像上的display: body避免使用垂直滚动条

html,
body {
    margin: 0;
    padding: 0;
}
img {
    display: block;
    max-height: 100vh;
    max-width: 100vw;
}

<a href="https://stackoverflow.com">
  <img src="http://www.dummyimage.com/1000x4000/000/fff&text=1000x4000">
</a>