Rule34 Image Fit

Resize and center images on Rule34

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Rule34 Image Fit
// @namespace    potato_potato
// @description  Resize and center images on Rule34
// @author       potato_potato
// @version      0.1.0
// @grant        none
// @run-at       document-start
// @match        https://rule34.xxx/index.php?page=post&s=view&id=*
// @license      MIT
// ==/UserScript==

(() => {
    'use strict';
    function resize_image() {
        try {
            let image = document.getElementById("image");
            if (image != null) {
                image.style["object-fit"] = "contain"; // Protect aspect ratio
                image.style["max-height"] = "85vh"; // TODO: Investigate buggy behaviour when set higher than 85vh.
                image.style.width = "100%"; // Note that this doesn't clobber aspect ratio due to `object-fit: contain`.
            }
        } catch (e) {
            console.log('Error modifying image! Website structure change?');
            console.log(e);
        }
    }

    // We want to operate on the DOM after it is loaded, but BEFORE images are loaded and rendered, to
    // avoid the image rendering for a frame before suddenly being moved/resized.
    if (document.readyState == "complete" || document.readyState == "loaded" || document.readyState == "interactive")
        resize_image();
    else
        window.addEventListener('DOMContentLoaded', resize_image, false);
})();