Discussions » Creation Requests

Vilipix推荐作品的图片按原图比例展示 Display the recommended artwork pictures in Vilipix in their original proportions

§
Posted: 2024.03.13.
Edited: 2024.03.13.

求大佬帮忙写个脚本,使得Vilipix(https://vilipix.com/)的推荐作品处的图片按原图的比例展示
Can someone help me write a script to make the recommended artwork images on Vilipix (https://vilipix.com/) display in their original proportions?

§
Posted: 2024.03.14.

我让AI帮我写了一个,但有个问题是一列的图片不能紧凑地排列导致中间有大量空白,希望能有大佬帮忙解决一下 代码如下

// ==UserScript==
// @name         Vilipix推荐作品按原图比例展示
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  增大Vilipix推荐作品的图片并按原图比例展示
// @author       dshs
// @match        https://vilipix.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    function resizeImages() {
        var pixCards = document.querySelectorAll('.pix-card');
        pixCards.forEach(function(card) {
            var illust = card.querySelector('.illust');
            var elImage = card.querySelector('.el-image');
            var img = card.querySelector('img.el-image__inner');

            if (img && img.naturalWidth && img.naturalHeight) {
                var width1 = img.naturalWidth;
                var height1 = img.naturalHeight;
                var width = 368
                var height = width * height1 / width1

                card.style.width = width + 'px';
                illust.style.width = width + 'px';
                illust.style.height = height + 'px';
                elImage.style.width = width + 'px';
                elImage.style.height = height + 'px';
            }
        });
    }

    function observeDOM(callback) {
        var observer = new MutationObserver(function(mutations) {
            callback();
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    resizeImages();
    observeDOM(resizeImages);
})();

Post reply

Sign in to post a reply.