网格状、多响应图像

Grid-like, Multiple Responsive Images

本文关键字：响应 图像 网格      更新时间：2023-09-26

我目前正在组建一个展示网站，在主内容区需要有许多图像/项目，以一个盒子状的顺序排列在一起。。。

http://jsfiddle.net/bdv3t/

我该如何制作它，以便当浏览器窗口被打开并变得更小时，这些图像/项目中的每一个都会逐渐缩小，并与其所在的容器成比例（因此，在大屏幕上，从左到右大约有8个图像/项目，这与在小屏幕上相同，只有每个图像的尺寸更小）？

我已经研究过使用像这样的响应图像，但没有成功，因为它只使一个图像全宽。如果可以的话，我希望避免使用表，更喜欢CSS-HTML方法而不是JS，但如果其他方法都失败了，JS方法就足够了。

在页面中包含jQuery，例如：

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

在你的所有拼图中添加一个类，例如：

<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（这个会让你的拼图变成窗口大小的1/5）：

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

我用你的Fiddle测试了一下，效果很好。要在Fiddle中包含jQuery，请选择左侧的jQuery作为框架（例如，jQuery 1.7.2）。然后将类名添加到片段中，并在JavaScript框中添加脚本。测试，直到你得到你想要的确切行为。

编辑：如果要最大限度地减少像素失真，请使用多种不同的图像大小，并在调整大小之前将图像源重置为最接近的可用大小。例如，假设瓷砖的图像大小为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();
});

Edited fiddle只需检查，如果您想要其他内容，请回复。

@媒体查询解决方案。

很明显，这是可以重写的，但有些东西。。。

http://jsfiddle.net/LAWNQ/

如果你对拥有多个图像源感兴趣，这样它们可以更愉快地放大，你可能想尝试其中之一：

  • Scott Jehl的流行picturefill polyfill，可以"自动"进行图像交换
  • 我的Jquery.Pikhur插件，如果你喜欢这类东西，它会给你更多细粒度的控制
相关文章：