如何让我的图像使用 shuffle.js 响应式调整大小？答案

【问题标题】：How do I get my images to responsively resize with shuffle.js?如何让我的图像使用 shuffle.js 响应式调整大小？
【发布时间】：2015-05-26 04:44:46
【问题描述】：

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

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

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

【问题讨论】：

链接主页不通..请检查
首页是ajsdesign.net

标签： javascript jquery responsive-design image-resizing shuffle

【解决方案1】：

您必须使用 CSS Grid 才能获得与 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应该没问题。

更新

我可以为你的页面做一些调整，当低于 690 像素时，我可以为你的项目设置一个更好的网格，并为你的项目改变这种样式：

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

【讨论】：

澄清我的问题：我不想调整网格的大小，这已经可以了。我希望图像本身调整大小。
检查我的更新，我为您的 .item 添加了一些背景和尺寸值
我尝试了你的最后一个建议，但它并没有保持图像的纵横比，它只是调整宽度。有没有办法在保持纵横比的同时调整高度和宽度？
请关注humble.rumble 评论并在此处发布您的随机播放代码示例，我会为您修复它。谢谢！

【解决方案2】：

澄清我的问题：我不想调整网格的大小，这已经可以了。

你已经有一个响应类附加到图像的容器中，

我希望图像本身调整大小。

那么您只需将max-width:100% 添加到img 元素即可。

就我而言：

  <figure class="xs-col-12 col-4 picture-item" data-title="The Magic Box">
    <div class="aspect aspect--16x9">
     <div class="aspect__inner">
      <img style="max-width:100%" src="/the-magic-box.png" />
     </div>
    </div>
    <figcaption>The Magic Box</figcaption>
  </figure>

【讨论】：