javascript - 如何使用 shuffle.js 响应式地调整图像大小？

Question

我正在我的 homepage 上使用 shuffle.js我正在尝试让我的图像能够响应式地调整大小，就像开发人员发布的演示 here 中那样。

现在我只是使用媒体查询作为解决方法，但结果远非理想。

注意:网格已经响应，我希望看到的是图像本身也可以调整大小。

Answer 1

您必须使用 CSS 网格才能与 Shuttle 结合实现良好的响应式效果。

注意元素上的类 .span3 和 .m-span3

您的链接示例使用的是 Bootstrap v2.3.2。 您可以使用具有更好语义的 Twitter Bootstrap 3，或任何其他网格系统。

http://getbootstrap.com/examples/grid/

如果您使用 Bootstrap 3，请添加类 xs-col-12 和 col-4，如下所示:

<div id="grid" class="shuffle">
    <div onclick="window.location.href = 'IEMA.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered ">
        <div id="overlay">ASTON</div>
    </div>
    <div onclick="window.location.href = 'Aston.html'" class="xs-col-12 col-4  item Aston shuffle-item filtered">
        <div id="overlay">IEMA</div>
    </div>
</div>

如果你不想包含Bootstrap，可以添加http://996grid.com/同样的方式，使用类 .grid_4 应该没问题。

更新

I can make some adjusts for your page have a better grid with shuffle changing for this style for your items when lower than 690px:

@media only screen and (max-width: 690px)
    .item {   
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 223px;
        width: 100%;
    }
}