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

Question

I am using shuffle.js on my homepage and I am trying to get my images to responsively resize like in this demo the developer posted here .

Right now I am just using media queries as a workaround, but the results are far from ideal.

Note: the grid is already responsive, what I would like to see is for the images themselves to resize as well.

Answer 1

You must use a CSS Grid to have a nice responsive combined with Shuttle.

Note the classes .span3 and .m-span3 on element

The example of your link is using Bootstrap v2.3.2. You can use the Twitter Bootstrap 3 which has better semantic as well, or any other grid system.

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

If you use Bootstrap 3, add the class xs-col-12 and col-4 like so:

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

If you don't want to include Bootstrap, you can add http://996grid.com/ with same way, using class .grid_4 shoud be fine.

Update

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%;
    }
}

Answer 2

To clarify my question: I'm not looking to resize the grid, that already works.

You have already a responsive class attached to the image's container,

I want the images themselves to resize.

then you only need to add max-width:100% to the img element.

In my case :

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