如何使砌体元素完美贴合整个宽度

Question

我有一个使用the masonry code from here

的元素

我想要的是以下布局：

所有图像都非常合适，整个元素都适合整个页面。

我目前得到的（所有图像与上面示例中的图像完全相同）：

我的元素是这样构建的：

<div id="gallery-items" class="gallery-items wow fadeInUp animated" data-wow-duration="2s" style="visibility: visible; animation-duration: 2s; animation-name: fadeInUp; position: relative; height: 571px;">
    <figure class="gallery-item masonryfullwidth" style="border: 1px solid blue; position: absolute; left: 0%; top: 0px;">
        <img src="cms/images/masonry/print/k1.jpg" class="imagemasonry" alt="gallery">
        <figcaption>
          <a class="fancybox" href="cms/images/masonry/print/k1.jpg">
            <span aria-hidden="true" class="icon-plus"></span>
          </a>
          <a href="#fakelink">
            <span aria-hidden="true" class="icon-info"></span>
          </a>
        </figcaption>
        </figure>
        <figure class="gallery-item masonryfullwidth" style="border: 1px solid blue; position: absolute; left: 10.1944%; top: 0px;">
        <img src="cms/images/masonry/print/k10.jpg" class="imagemasonry" alt="gallery">
        <figcaption>
          <a class="fancybox" href="cms/images/masonry/print/k10.jpg">
            <span aria-hidden="true" class="icon-plus"></span>
          </a>
          <a href="#fakelink">
            <span aria-hidden="true" class="icon-info"></span>
          </a>
        </figcaption>
        </figure>
        <figure class="gallery-item masonryfullwidth" style="border: 1px solid blue; position: absolute; left: 30.5833%; top: 0px;">
        <img src="cms/images/masonry/print/k100.jpg" class="imagemasonry" alt="gallery">
        <figcaption>
          <a class="fancybox" href="cms/images/masonry/print/k100.jpg">
            <span aria-hidden="true" class="icon-plus"></span>
          </a>
          <a href="#fakelink">
            <span aria-hidden="true" class="icon-info"></span>
          </a>
        </figcaption>
    </figure>
</div>

然后在我的页脚中，我在文档就绪函数中得到了以下部分：

var $container = $('#gallery-items');

  $(window).load(function() {
      $container.isotope({
          //resizable: false, // disable normal resizing
          transitionDuration: '0.65s',
          masonry: {
              columnWidth: $container.find('.gallery-item:not(.wide)')[0]
          }
      });

      $(window).resize(function() {
          $container.isotope('layout');
      });
  });

在我的例子中，当我调整窗口大小时，图像会调整大小以适合他们的parentdiv，但是我的砌体元素在调整大小时都保持相同的大小。

你可以看到我做的砌筑here