如何使用shuffle.js快速调整图片大小？

Question

我在我的主页上使用shuffle.js，并且试图像开发人员在此处发布的此演示中那样，使我的图像响应地调整大小。

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

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

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，则可以使用.grid_4类以相同的方式添加http://996grid.com/ 。

更新

当您的项目低于690px时，我可以为您的页面进行一些调整，以使您的项目的样式更改为随机更改：

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

Answer 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>