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

Question

例如，如果我有一个可以浏览的图片库，有时会打开多个图片库，我在调整一个图片库的大小时必须小心 window，因为它会针对另一个相同的图片库调整不同的大小页。

我能想到的最好的例子是，当您在新选项卡中单独打开一张图片时，无论 window 是大是小，它都会在页面中间按比例自动调整大小。无需滚动

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

<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"]

我见过插件对视频执行此操作，但我希望只对图像执行此操作。在这一点上，查看其他 "similar" 示例比帮助更让我感到困惑

(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://whosebug.com">
  <img src="http://www.dummyimage.com/1000x4000/000/fff&text=1000x4000">
</a>

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

Is it possible to maximize the dimension of a specific image according to the size of a browser window using greasemonkey/tampermonkey?

html

css

google-chrome

image

maximize