2

我目前正在整理一个展示网站，在主要内容区域中，需要有许多图像/项目，以一个盒子状的顺序排列，彼此相邻并重叠......

http://jsfiddle.net/bdv3t/

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

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

4

4 回答 4

1

在您的页面中包含 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 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();
});
于 2012-08-06T05:55:56.093 回答
0

编辑过的小提琴只是检查一下，如果你想要别的东西然后回复。

@media 查询解决方案。

于 2012-08-06T06:03:56.227 回答
0

显然，这可以重做，但是类似于...

http://jsfiddle.net/LAWNQ/

于 2012-08-07T02:15:43.513 回答
0

如果您对图像的多个来源感兴趣，以便它们可以更愉快地放大，您可能想尝试其中一种：

  • Scott Jehl 流行的图片填充 polyfill ，它可以“自动”交换图像
  • 我的Jquery.Pikshur 插件，如果你喜欢这种东西，它会给你更细粒度的控制
于 2013-09-05T15:43:44.067 回答