Rule34 Image Fit

Resize and center images on Rule34

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==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);
})();