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 类可以。

更新

我可以为您的页面进行一些调整，以便在低于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>

Answer 3

我建议您尝试Piio此库将了解Shuffle.js正在做什么，并且它将根据用户屏幕读取<img/>容器大小，然后调整图像大小。根据浏览器功能运行并以最佳格式提供服务，同时使用CDN提供它们。

使用piio后，您的代码将如下所示：

<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%" data-piio="/the-magic-box.png" />
 </div>
</div>
<figcaption>The Magic Box</figcaption>

如果您想了解更多有关它以及它如何与响应式图像一起使用，请阅读本文： https://blog.piio.co/2018/04/09/how-to-use-optimized-responsive-images/

如何使用shuffle.js响应性地调整我的图像？

3 个答案: