如何使用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>