javascript - 网格状、多重响应图像

Question

我目前正在建立一个展示网站，在主要内容区域中需要有一些图像/元素，以类似方框的顺序排列并彼此相邻...

http://jsfiddle.net/bdv3t/

我将如何着手制作它以便当浏览器窗口被带入并变小时，这些图像/元素中的每一个逐渐缩小并与其所在的容器成比例(所以在大屏幕上有从左到右大约有 8 个图像/元素，这与在较小的屏幕上相同，只是每个图像的尺寸较小)？

我研究过使用响应式图像，例如 this和 this但没有运气，因为它只使一个图像全宽。如果可以的话，我想避免使用表格，而更喜欢 CSS-HTML 方法而不是 JS，但如果所有其他方法都失败了，那么 JS 方法就足够了。

Answer 1

在您的页面中包含 jQuery，例如:

<script src="jquery-latest.js"></script>

为您所有的拼图 block 添加一个类，例如:

<li><img class="pieces" src="http://dummyimage.com/200x200/000/fff" alt="1" width="200" height="200"/></li>
<li><img class="pieces" src="http://dummyimage.com/200x200/000/fff" alt="1" width="200" height="200"/></li>
// etc.

包括像这样的 JavaScript(这将使您的拼图 block 成为窗口大小的 1/5):

$(document).ready(function() {
    $(window).on("resize", function() {
        $(".pieces").width($(window).width() / 5).height($(window).height() / 5);
    });
});

我用您的 Fiddle 对此进行了测试，效果很好。要在您的 Fiddle 中包含 jQuery，请在左侧选择它作为框架(例如，jQuery 1.7.2)。然后将类名添加到 JavaScript 框中的片段和脚本中。进行测试，直到获得所需的确切行为。

编辑:如果您想最大程度地减少像素失真，请使用多种不同的图像尺寸，并在调整尺寸之前将图像源重置为最接近的可用尺寸。例如，假设您的图 block 的图像尺寸为 400x400、300x300、200x200、100x100 和 50x50。 JavaScript 会变成类似这样的东西:

$(document).ready(function() {
    updatePieceSize = function() {
        var side, imgSize, src;

        side = Math.min($(window).width(), $(window).height()) / 5;

        if (side >= 350) {
            imgSize = "400x400";
        } else if (side >= 250) {
            imgSize = "300x300";
        } else if (side >= 150) {
            imgSize = "200x200";
        } else if (side >= 75) {
            imgSize = "100x100";
        } else {
            imgSize = "50x50";
        }
        src = "http://dummyimage.com/" + imgSize + "/000/fff";

        $(".pieces").attr("src", src).width(side).height(side);        
    };

    $(window).on("resize", updatePieceSize);
    updatePieceSize();
});