Можно ли максимизировать размер конкретного изображения в соответствии с размером окна браузера, используя greasemonkey / tampermonkey? - PullRequest
Новая
       10

Можно ли максимизировать размер конкретного изображения в соответствии с размером окна браузера, используя greasemonkey / tampermonkey?

0 голосов
/ 19 февраля 2019

Например, если у меня есть галерея изображений, которые я могу просматривать, иногда с несколькими открытыми галереями, я должен быть осторожен при изменении размера одного окна, потому что оно будет изменяться по-разному для другого на той же странице.

Лучший пример, который я могу вспомнить, - это когда вы открываете само изображение в новой вкладке, и оно пропорционально автоматически изменяется в середине страницы, независимо от того, большое или маленькое окно.Прокрутка не требуется

Если это поможет, вот пример кода, где показано изображение 

<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");

, который работает, но уничтожил все остальные атрибуты ...

Кажется, что оба работают только в консоли, а не в скрипте, при изменении значений максимальной высоты и максимальной ширины.нет проблем с изменением других значений

1 Ответ

0 голосов
/ 20 февраля 2019

Из того, что вы описали, вы можете использовать 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>
...