同位素砌体重叠图像

Question

我有一个同位素随附的模板。我用自定义图像替换了默认图像（没有问题）。这导致图像在每个图像的底部大约有10px的像素。但是，如果您将屏幕调整为较小的尺寸，那很好。调整大小使其恢复正常，问题再次出现。

实时链接：https://ptm.izttech.dev/

任何帮助都会超级有帮助！

初始化：

  $( function() {
  // init Isotope
  var $container = $('.fix-portfolio .isotope');

  $container.isotope({
    itemSelector: '.item',
    transitionDuration: '0.6s',
    masonry: { columnWidth: $container.width() / 12 },
    layoutMode: 'masonry'
  });

  $(window).resize(function(){
    $container.isotope({
        masonry: { columnWidth: $container.width() / 12 }
    });
  });
  // bind filter button click
  $('.fix-portfolio #filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    $container.isotope({ filter: filterValue });
  });
  // change is-checked class on buttons
  $('.fix-portfolio .button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });
  // layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});
});

HTML代码：

      <div class="portfolio fix-portfolio">
        <div id="filters" class="button-group pull-right">
          <button class="button is-checked" data-filter="*">All</button>
          <!--<button class="button" data-filter=".tanks">Tanks</button>
          <button class="button" data-filter=".item1">Item1</button>
          <button class="button" data-filter=".item2">Item2</button>
          <button class="button" data-filter=".item3">Item3</button>-->
        </div>
        <div class="clearfix"></div>
        <div class="isotope items">
          <div class="item width2 height2 web">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 1</span></div>
              </div>
              <img  src="style/images/tanks/DSCN3970-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 2</span></div>
              </div>
              <img src="style/images/tanks/DSCN3965-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item height2">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 3</span></div>
              </div>
              <img src="style/images/tanks/DSCN3972-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item video">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 4</span></div>
              </div>
              <img src="style/images/tanks/DSCN3975-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item height2 web">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 5</span></div>
              </div>
              <img src="style/images/tanks/DSCN3976-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item photography">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 6</span></div>
              </div>
              <img src="style/images/tanks/DSCN8870-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item web">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 7</span></div>
              </div>
              <img src="style/images/tanks/DSCN8871-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item height2 graphic">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 8</span></div>
              </div>
              <img src="style/images/tanks/DSCN8873-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item width2 height2 video">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 9</span></div>
              </div>
              <img src="style/images/tanks/DSCN8875-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <div class="item graphic">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 10</span></div>
              </div>
              <img src="style/images/tanks/DSCN8924-IZTOptimized.JPG" alt="" /> </a></figure>
          </div>
          <!--<div class="item photography">
            <figure><a href="portfolio-post.html">
              <div class="text-overlay">
                <div class="info"><span>Project 11</span></div>
              </div>
              <img src="style/images/art/p11.jpg" alt="" /> </a></figure>
          </div>-->
        </div>
   </div>