我一直试图让一个马赛克出现在我的网站，我的建设顶部。我有大约50张图片（如果需要，我可以得到更多），我把里面的马赛克，需要有两个关键属性：
1.马赛克总是全幅的
1.马赛克总是使用70%的屏幕高度，剩下的30%用于标题
基本上，无论您的浏览器大小如何，我总是希望马赛克占据70%并且具有固定的高度。请参阅我所指的图表：
x1c 0d1x的数据
有几点值得一提：

• 在上面的示例图中，我完全理解 * 为什么 * 我会得到这个结果，马赛克容器被固定为全宽，所以这就是为什么它要么变得太大，要么缩小到仍然适合所有宽度
• 我不在乎是否显示某些图像，我只是在寻找固定高度的马赛克效果，如果这意味着在某些屏幕上的某些行或列的图片将丢失，我不介意。我也不介意图片的大小，它仍然必须看起来像马赛克，但我没有预设的宽度/高度。

我如何才能让这样一个马赛克工作？我一直在尝试不同的方法。例如，我尝试将我的马赛克组织成图片行（我将底部的行称为“disposableContainer 1”和“disposableContainer 2”，并在屏幕达到一定大小时使底部的行消失：

document.addEventListener('DOMContentLoaded', function() {
    function adjustContainerVisibility() {
        var disposableContainer1 = document.getElementById('mosaic-row-4'); // Replace with actual ID
        var disposableContainer2 = document.getElementById('mosaic-row-3'); // Replace with actual ID

        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;

        var thresholdForContainer1, thresholdForContainer2;

        if (windowWidth > 900) {
            // Width greater than 900px
            thresholdForContainer1 = 760;
            thresholdForContainer2 = 740;
        } else if (windowWidth > 800) {
            // Width between 801px and 900px
            thresholdForContainer1 = 750;
            thresholdForContainer2 = 730;
        } else {
            // Width 800px or less
            thresholdForContainer1 = 730;
            thresholdForContainer2 = 650;
        }

        // Debugging logs
        console.log('Window Height:', windowHeight, 'Window Width:', windowWidth);
        console.log('Thresholds:', thresholdForContainer1, thresholdForContainer2);

        // Check and apply visibility for disposableContainer1
        if (windowHeight < thresholdForContainer1) {
            if (disposableContainer1) disposableContainer1.style.display = 'none';
        } else {
            if (disposableContainer1) disposableContainer1.style.display = ''; // Reset to default
        }

        // Check and apply visibility for disposableContainer2
        if (windowHeight < thresholdForContainer2) {
            if (disposableContainer2) disposableContainer2.style.display = 'none';
        } else {
            if (disposableContainer2) disposableContainer2.style.display = ''; // Reset to default
        }
    }

    // Run on page load
    adjustContainerVisibility();

    // Add event listener for window resizing
    window.addEventListener('resize', adjustContainerVisibility);
});

字符串
但这并不能真正做到这一点，有太多的视图组合可能，我很确定必须有一个更聪明的方法来解决这个问题。
我的想法是：

• 我能不能做一个更大更宽的马赛克，并且让马赛克的一部分不总是可见的，这意味着侧面图像只会在需要填充70%屏幕高度的情况下出现，否则它们超出了屏幕的限制，你看不到它们？不知道这是否有意义
• 我可以做一些像砖石或网格类型的东西，使它的图像在马赛克总是使用所有可用的空间？我真的不介意，如果马赛克图片是不完全相同的高度/宽度比。

请让我知道如果你有一些想法，我相信一定有一个有效的方法来解决这个问题。正如你可能会告诉，我真的是新的web开发.